SpringBoot+Vue前后端分离实现高并发秒杀——前端知识总结

一、Vue项目构建

vue init webpack 项目名 // 适用于大型项目
vue init webpack-simple 项目名 // 适用于小型项目
cd 项目名
npm install //安装依赖
npm run dev //运行项目

二、Vue基本语法，数据绑定，组件

v-bind 绑定文本，属性，表达式，可缩写为 :
v-model 多用于表单中可以绑定text,radio,checkbox,selected
v-html 用于输出html代码
v-if ，v-else-if ，v-else根据表达式值来决定是否插入该元素，v-else-if ，v-else必须紧跟在v-if或v-else-if后
v-on 用于监听DOM事件，可缩写为 @
v-show 用于展示元素
v-for 循环v-for="(val,index) in value" :key=index

computed:{} 计算属性，基于它的依赖缓存

methods:{} 重新渲染时，函数总会重新调用

watch:{} 监听属性

components:{} 组件
vue.js学习地址：https://cn.vuejs.org/v2/guide/

三、vue-router使用

安装 npm install vue-router -d
<router-link\ to="/url"></router-link>
<router-view></router-view> 路由出口，路由匹配到的组件将渲染在这里
import 名称 from ‘组件路径’
{path: ‘路径’,
componet: 名称,
children:[{
path:‘路径’,
component: 名称
}]
}
vue-router学习地址：https://router.vuejs.org/zh/

四、Element-ui使用

安装 npm install element-ui –d
引入import Element from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(element-ui)
element-ui学习地址：https://element.eleme.cn/#/zh-CN/component/quickstart

五、Axios发送请求

npm install axios -d
vue-axios: npm install vue-axios –d
qs: npm install qs –d
引入import Axios from ‘axios’
import VueAxios from ‘vue-axios’
import Qs from ‘qs’
Vue.use(VueAxios,Axios)
Vue.use(Qs)
Axios.defaults.baseURL = ‘http://127.0.0.1:8888’
Axios.defaults.headers[‘Content-Type’] = ‘application/x-www-form-urlencoded;charset=UTF-8’
Axios.defaults.withCredentials = true
axios学习地址：https://github.com/axios/axios

六、Vuex管理状态

npm install vuex –d
import Vuex from ‘vuex’
Vue.use(Vuex)
vuex学习地址：https://vuex.vuejs.org/zh/

七、Vue项目去掉url后的#

//基于webpack-simple修改vue-router模式为history
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
const router = new VueRouter({
mode: ‘history’
})

//基于webpack修改index.js文件
export default new Router({
mode: ‘history’
})

八、Vue项目打包发布到Nginx

npm run build
将dist目录和index.html放到服务器上
修改nginx配置文件/etc/nginx/conf.d/default.conf

添加类容：
server{
listen 8080;
location / {
root /usr/local/seckill;
index index.html;
try_files $uri $uri/ /index.html;
}
}

如果vue-router模式为history需加上try_files $uri $uri/ /index.html;不然会404
配置端口号，服务器dist和index.html目录，首页等
启动命令nginx
停止命令nginx -s stop