this.setToken(res.data.data.token);
// this.setUser(res.data.data[0].username);
// console.log(res.data[0].username);
localStorage.setItem('token',res.data.data.token);
创建
vue
项目
npm install -g vue-cli
vue init webpack vue_demo (vue_demo项目名)
cd vue_demo
npm install
npm run dev (下载)
访问
: http://localhost:8080/
模板项目的结构
build : webpack
相关的配置文件夹
(
基本不需要修改
)
dev-server.js :
通过
express
启动后台服务器
config: webpack
相关的配置文件夹
(
基本不需要修改
)
index.js:
指定的后台服务的端口号和静态资源文件夹
node_modules
src :
源码文件夹
components: vue
组件及其相关资源文件夹
App.vue:
应用根主组件
main.js:
应用入口
js
static:
静态资源文件夹
.babelrc: babel
的配置文件
.eslintignore: eslint
检查忽略的配置
.eslintrc.js: eslint
检查的配置
.gitignore: git
版本管制忽略的配置
index.html:
主页面文件
package.json:
应用包配置文件
README.md:
应用描述说明的
readme
文件
项目的打包与发布
打包:
npm run build
发布:
1.
使用静态服务器工具包
npm install -g serve
serve dist
访问
: http://localhost:5000
2:
使用动态
web
服务器
(tomcat)
修改配置
: webpack.prod.conf.js
output: {
publicPath: '/xxx/' //
打包文件夹的名称
}
重新打包
:
npm run build
修改
dist
文件夹为项目名称
: xxx
将
xxx
拷贝到运行的
tomcat
的
webapps
目录下
访问
: http://localhost:8080/xxx
Element (安装)
vue add element
1.创建mock目录 在创建index.js
2.index.js
const express = require("express");
const app = express();
app.get('/',(req,res) => {
res.send({
msg:"success"
})
})
app.listen(8800,function(){
console.log("服务器运行在8800端口上");
})
3.cnpm install --save express 执行下载
4. node index.js
5.在浏览器上输入自己创建的端口号
6.配置前后端同时使用
7.创建nodemon.josn 配置
{
"restartable": "rs",
"ignore": [
".git",
".svn",
"node_modules/**/node_modules"
],
"verbose": true,
"execMap": {
"js": "node --harmony"
},
"watch": [
],
"env": {
"NODE_ENV": "development"
},
"ext": "js json"
}
7.更改
const express = require("express");
const app = express();
const debug = require("debug")("my-application")
app.get('/',(req,res) => {
res.send({
msg:"success"
})
})
app.listen(8800,function(){
debug("服务器运行在8800端口上");
})
前后端同时配置运行
1在目录下创建readme-point.md 也在在包里面写上这个
"dev": "concurrently \"npm run serve\" \"nodemon mock/index.js\""
2.打开后端服务器端 nodemon index.js 就行
cnpm insatll -g concurrently(全局配置con。。。)这个时候就可以前后端一起运行
npm run dev 这样子就可以前后端一起运行
可视化工具的使用 和安装
3.在vue项目根目录下安装
vue add element (UI可视化工具)
![](https://i-blog.csdnimg.cn/blog_migrate/f95dad5753b8b4c311056569450c3676.png)
全局安装axios npm install --save axios
1.后端接口 在目录下安装
cnpm install --save mysql
1.登录
封装axios接口
2.登录判断
3.路由关联
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login/index.vue'
import Applied from '../views/Applied/index.vue'
import Consumer from '../views/Consumer/index.vue'
import Order from '../views/Order/index.vue'
import Layout from '../views/Layout.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
name: 'Login',
component: Login,
meta: { //判断一个参数
isLogin: false
}
},
{
path:"/",
component:Layout,
children:[
{
path:'/' , redirect:'/applied' //重定向到oeder
},
{
path: 'applied',
name: 'Applied',
component: Applied,
meta: { //判断一个参数
isLogin: true
}
},
{
path: 'consumer',
name: 'Consumer',
component: Consumer,
meta: { //判断一个参数
isLogin: true
}
},
{
path: 'order',
name: 'Order',
component: Order,
meta: { //判断一个参数
isLogin: true
}
},
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
//路由导航守卫
router.beforeEach((to, from, next) => {
if (to.meta.isLogin) { //判断用户是否登录
//用token判断用户是否登录
if (true) {
//跳转到对应页面
next();
} else {
//去登录页面
console.log("去登录");
next({
path: "/login"
});
}
} else {
next();
}
})
export default router
3.在目录下创建stote目录
首先创建modules目录
然后在创建loginModule.js文件
export default {
namespaced:true, //解决作用域
state:{
token:"",
user:""
},
mutations:{
//设置token
setToken(state,value){
state.token = value;
},
//清除token
clearToken(state){
state.token = ""
},
//设置用户
setUser(state,value){
state.user = value
},
//清除用户
clearUser(state){
state.user = ""
}
}
}
3.在登录页面判断是否有token值 然后存入缓存
this.setToken(res.data.data.token);
// this.setUser(res.this.username);
// console.log(res.data[0].username);
localStorage.setItem('token',res.data.data.token);
4.路由守卫 把false改为 store.state.LoginModule.token 这样就能跳转
router.beforeEach((to, from, next) => {
if (to.meta.isLogin) { //判断用户是否登录
//用token判断用户是否登录
if (store.state.LoginModule.token) { //store.state.LoginModule.token
//跳转到对应页面
next();
} else {
//去登录页面
console.log("去登录");
next({
path: "/login"
});
}
} else {
next();
}
5.为了防止路由刷新,在跳转到登录页面
在main.js里面添加上下面代码 然后防止了数据刷新
判断是否有路由在本地储存里面 有就不用刷新
//判断是否输在本地存储里面
//&& localStorage.getItem("egouser")
if(localStorage.getItem("token") ){
store.commit("LoginModule/setToken",localStorage.getItem("token"));
// store.commit("LoginModule/setUser",localStorage.getItem("egouser"));
}
退出登录区域
1.把退出登录写在导航
<el-menu-item class="user" index="4">
<span class="users">{{user}}</span>
<el-button>退出登录</el-button>
</el-menu-item>
2.在导航区域导入读取得数据vuex
import { mapState } from "vuex";
3.把读取user的用户名读取到
computed:{
...mapState("LoginModule",{
user:state => state.user //读取user数据
})
然后在双向绑定user {{ user }} 就等读取到
4.退出 首先在vuex里面导入读入的mapMutayions 然后在methods写点击事件
methods:{
...mapMutations("LoginModule",["clearToken","clearUser"]),
handleSelect(key,keyPath){
localStorage.setItem("currentIndex",key)
},
//退出登录的
logout(){
//1.退出登录必须清除缓存
//2.获取读取的值clear
//3.跳转到登录页面
localStorage.removeItem("user");
localStorage.removeItem("token");
this.clearToken();
this.clearUser();
this.$router.replace("/login");
}
}
获取值非常重要
在做的时候,token值没有,一直叫我请登录
<template>
<div></div>
</template>
<script>
import axios from 'axios';
import ElementTable from "../../../components/element-table"
export default {
name:"ConsumerList",
data(){
return{
// name:this.username,
// pw:this.password
arr:[]
}
},
components:{
ElementTable
},
methods: {
},
created(){
axios.post("http://chengmei_dev.wanxikeji.cn/api/admin/userList",{
// token:localStorage.setItem(res.data.data.token)
token:localStorage.getItem("token") //获取本地的token缓存
}).then((res) =>{
localStorage.getItem("token"); //存入缓存的token值
// this.arr.push(res.data.data.token);
this.arr.push(res.data.data.data); //获取数据
console.log(this.arr); //打印获取的数据
console.log(res);
})
}
}
</script>
<style>
</style>
二次封装element
1.在vue components下创建目录
//在新index.vue,写入
<template>
<el-table :data="tableData" style="width:100%">
<slot></slot>
</el-table>
</template>
<script>
export default {
/**
* 二次封装
* 样式的修改,结构的修改
*/
name:"ElementTable",
props:{
tableData:{
type:Array,
default:() => {
return []
}
}
}
}
</script>
<style>
</style>
2.