vue vue-cli创建项目 ElementUi Ego项目

最新推荐文章于 2023-09-22 11:26:20 发布

黑暗名单㊣

最新推荐文章于 2023-09-22 11:26:20 发布

阅读量244

点赞数 1

文章标签： node.js vue.js

本文链接：https://blog.csdn.net/weixin_44928631/article/details/118220562

版权

	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可视化工具）

全局安装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

首先创建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>

黑暗名单㊣

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue vue-cli创建项目 ElementUi Ego项目

创建 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 相关.
复制链接

扫一扫