正文

vue项目实战1

shaozhu520  shaozhu520  2023-01-04  705

关键词：

VUE 项目实战1

--------------------------------------------------

server.js

当前目录要启两个服务一个前端的一个后端

1. 启动后端服务

node server.js

2.启动前端的服务

npm run dev

10：22：00

--------------------------------------------------

懒加载

vue-Lazyload

requirejs

--------------------------------------------------

mysql

route/index.js

--------------------------------------------------

mysql 数据库

1.安装

pwd:root

2查看数据库

show databases;

3.创建数据库：create database jd;
CREATE DATABASE JD;

删除：drop database jd;
drop database MYSQLDATA;

4.使用数据库 use jd;

(关联数据库)

source d:vipxxxxxxxxxxjd.sql;

source f:VUE项目vue实战jd.sql;

F:VUE项目vue实战jd.sql

source F:VUE项目vue实战jd.sql;

source f:jd.sql;

--------------------------------------------------

53;00：22

47:42

--------------------------------------------------

　MySql常用命令总结

　　1、使用SHOW语句找出在服务器上当前存在什么数据库：

　　mysql> SHOW DATABASES;

　　2、创建一个数据库MYSQLDATA

　　mysql> CREATE DATABASE MYSQLDATA;

　　3、选择你所创建的数据库

　　mysql> USE MYSQLDATA; (按回车键出现Database changed 时说明操作成功!)

　　4、查看现在的数据库中存在什么表

　　mysql> SHOW TABLES;

　　5、创建一个数据库表

　　mysql> CREATE TABLE MYTABLE (name VARCHAR(20), sex CHAR(1));

　　6、显示表的结构：

　　mysql> DESCRIBE MYTABLE;

　　7、往表中加入记录

　　mysql> insert into MYTABLE values (”hyq”,”M”);

　　8、用文本方式将数据装入数据库表中(例如D:/mysql.txt)

　　mysql> LOAD DATA LOCAL INFILE “D:/mysql.txt” INTO TABLE MYTABLE;

　　9、导入.sql文件命令(例如D:/mysql.sql)

　　mysql>use database;

　　mysql>source d:/mysql.sql;

　　10、删除表

　　mysql>drop TABLE MYTABLE;

　　11、清空表

　　mysql>delete from MYTABLE;

　　12、更新表中数据

　　mysql>update MYTABLE set sex=”f” where name=’hyq’;

--------------------------------------------------

Welcome to the MySQL monitor. Commands end with ; or g.
Your MySQL connection id is 5
Server version: 5.7.3-m13 MySQL Community Server (GPL)

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type ‘help;‘ or ‘h‘ for help. Type ‘c‘ to clear the current input statement.

键入“帮助”或“h”以寻求帮助。键入“C”以清除当前输入语句。

For information about MySQL products and services, visit:
http://www.mysql.com/
For developer information, including the MySQL Reference Manual, visit:
http://dev.mysql.com/
To buy MySQL Enterprise support, training, or other products, visit:
https://shop.mysql.com/

List of all MySQL commands:
Note that all text commands must be first on line and end with ‘;‘
? (?) Synonym for `help‘.
clear (c) Clear the current input statement.
connect ( ) Reconnect to the server. Optional arguments are db and host.
delimiter (d) Set statement delimiter.
ego (G) Send command to mysql server, display result vertically.
exit (q) Exit mysql. Same as quit.
go (g) Send command to mysql server.
help (h) Display this help.
notee ( ) Don‘t write into outfile.
print (p) Print current command.
prompt (R) Change your mysql prompt.
quit (q) Quit mysql.
rehash (#) Rebuild completion hash.
source (.) Execute an SQL script file. Takes a file name as an argument.
status (s) Get status information from the server.
tee (T) Set outfile [to_outfile]. Append everything into given outfile.
use (u) Use another database. Takes database name as argument.
charset (C) Switch to another charset. Might be needed for processing binlog with multi-byte charsets.
warnings (W) Show warnings after every statement.
nowarning (w) Don‘t show warnings after every statement.
resetconnection(x) Clean session context.

For server side help, type ‘help contents‘

请注意，所有文本命令必须首先在线，并结束与‘；

;

--------------------------------------------------

项目目录

route
index.js

这个里面的是接口文档

配置数据也是在这个文件里面

--------------------------------------------------

后端服务要装的东西

要装的东西

cnpm install cookie-parser

cnpm install cookie-session

cnpm install mysql

$ node server.js
正在监听3333端口

OK了

--------------------------------------------------

查看入口文件 webpack.config.js 看这个文件里面

--------------------------------------------------

main.js

懒加载

http://www.cnblogs.com/xyyt/p/7650539.html

--------------------------------------------------

192.168.16.103

springboot+vue+实战项目之第1集(代码片段)

SpringBoot+vue+实战项目--锋迷商城1.项目功能2.技术选型3.项目架构的演进4.SpringBoot5.Usercontroller（实操注册用户）6.Java配置方式6.1xml配置6.2注解配置6.3Java配置⽅式（第三方类对象）7.SpringBoot自动配置（底层... 查看详情

springboot+vue+实战项目之第2集(代码片段)

SpringBoot+vue+实战项目--锋迷商城1.Maven聚合工程1.1Maven聚合工程概念1.2创建Maven聚合工程1.2.1创建Maven父工程1.2.2创建Module1.3Maven聚合工程依赖继承1.3.1依赖继承1.3.2依赖版本管理2.《锋迷商城》项目搭建2.1技术储备2.2创建Maven聚... 查看详情

vue学习笔记-从0到1搭建实战项目(代码片段)

新建项目vuecreatehello1注：项目名称不能有大写字母（Warning:namecannolongercontaincapitalletters）新建项目vuecreatehello1http://localhost:8080/vscode导入文件用vscode导入文件新增页面1.新增文件views/introduce.vue<templa 查看详情

vue2.0实战项目vue-router

Vue-router本次实战项目所使用的Vue-router版本是2.3.1首先在main.js中引入Vue-router，importVuefrom‘vue‘;importRouterfrom‘vue-router‘;//如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：//如果使用全局的script标签，则... 查看详情

vue开发实战实战篇#27：使用vuecli3快速创建项目(代码片段)

说明【Vue开发实战】学习笔记。通过命令创建项目vuecreateant-design-vue-pro选择相应的配置手动配置如下：等待安装完毕进入文件夹cdant-design-vue-pro安装依赖库安装ant-design-vuemoment库npmiant-design-vue@1.7.8moment搭建好的项目目录目... 查看详情

vue2.0实战项目——安装vue.cli

1.打开Vue脚手架的github地址：https://github.com/vuejs/vue-cli，在README查看如何安装2.通过npm安装vue$npminstall-gvue-cli3.通过webpack安装$vueinitwebpackmyProjectName4.切换到创建的项目目录，然后安装依赖文件npminstall 查看详情

[vue项目实战]电商系统项目初始化(代码片段)

电商系统项目概述电商项目基本业务概述电商后台管理系统的功能电商后台管理系统的开发模式(前后端分离)电商后台管理系统的技术选型1.前端项目技术栈2.后端技术栈前端项目初始化123通过`vueui`来初始化项目4.配置element... 查看详情

vue饿了么项目实战笔记

1.页面骨架开发1.1组件拆分手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局... 查看详情

《vue.js从入门到项目实战》的项目实战笔记

vue项目之启动项目前言：vue的基本知识重点讲述《vue.js从入门到项目实战》的第一章到第四章vue项目化重点讲述《vue.js从入门到项目实战》的第六章接下来就是对第八章的启动了。文章目录vue项目之启动项... 查看详情

vue+element项目实战(代码片段)

...xff09;5.前端的一些使用技巧。该笔记总结于b站Vue+Element项目实战1.vue的的组件化应用在需要使用组件的地方进行引入importDepManafrom'../../components/sys/DepMana.vue';importEcManafrom'../../components/sys/EcMana.vue';importJobLevelManafrom'... 查看详情

vue2.5开发去哪儿网app从零基础入门到实战项目

第1章课程介绍本章主要介绍课程的知识大纲，学习前提，讲授方式及预期收获。1-1课程简介第2章Vue起步本章将快速讲解部分Vue基础语法，通过TodoList功能的编写，在熟悉基础语法的基础上，扩展解析MVVM模式及前端组件化的概念... 查看详情

springboot+vue+实战项目之第4集(代码片段)

《锋迷商城》设计及实现—用户管理1.实现流程2.后端接口开发2.1完成DAO操作2.2完成Service业务2.3完成Controller提供接口2.4接口测试1.实现流程2.后端接口开发2.1完成DAO操作创建实体类 @Data @NoArgsConstructor @AllArgsConstructor @Ap... 查看详情

vue项目实战

本文实战为主，没有基础，真正的基础是要从实战开始：：：安集vue集成环境：npminstall-gvue-cli 执行vue检查安装情况：Options:-V,--versionoutputtheversionnumber-h,--helpoutputusageinformationCommands:initgenerateanewprojectfromatemplatelistlist 查看详情

前后端分离项目实战从零构建后一个完整的后台项目之vue的学习(代码片段)

文章目录一）什么是vue？1、渐进式框架是什么意思？2、为什么用vue而不是其他的前端框架？目前流行的前端框架：1）渐进式对比Angular：对比React：2）其他优势二）vue开发环境的搭建1、安... 查看详情

前后端分离项目实战从零构建后一个完整的后台项目之vue的学习(代码片段)

vue项目实战-pc端新闻网页

1、项目初始基于vue-cli搭建项目vuecreatenews-app页面采用flex布局、样式使用sass2、首页的搭建主要包括导航栏，轮播图，及主要新闻的展示 2、点击导航栏可进行不同新闻的切换通过id的不同获得不同的数据，进行页面... 查看详情

vue实战项目之获取手机短信验证码

参考技术A1，先判断手机号和验证是否为空，2，点击发送验证码，1分钟计时，得到验证码3，输入的验证码是否为空和是否正确，4，最后向服务发送请求初始界面如下：获取验证码时进行倒计时效果如下：查看详情