4.【threeking】快速搭建一个vue项目

4.快速搭建一个vue项目

1.使用vue-cli来构建一个项目，

vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK

1.安装vue-cli

2.用vue-cli来构建项目

3.启动项目

以上是一些大佬们总结出来的搭建方式，前端的小伙伴都会

下面这个是具体是具体命令

$ npm install -g @vue/cli
$ vue create my-project
$ cd my-project
$ npm run serve

npm install -g @vue/cli 为vue cli4(cli3也是这个命令，不过需要指定版本），配合vue create my-project使用，而之前的是npm install -g vue-cli为vue cli2，配合vue init webpack my-project,这里使用vue cli4

创建项目vue create my-project时会有这个选项，Manually是手动配置，不知道选啥参考 vue cli参考blog、vue-cli使用推荐，不过这些都是3.0一下的，如果英语好的可以去官网上看

创建完成后，出现这么这个提示

 $ cd my-project
 $ npm run serve

按照命令执行后，打开链接http://localhost:8080/

生成的项目目录树如下图所示：

至此完成一个vue项目的搭建

2.使用vue项目图形化界面

vue ui 命令，全局使用，执行后即可打开http://localhost:8000/project/select

点击导入项目。将自己的项目导入进来，进行管理

点击可以查看项目的插件、依赖等情况

3.解决跨域问题，并尝试调用服务接口

因为调用后台接口的时候，基本上都需要解决跨域问题，所以vue-cli给出了解决方案 ，参考github

在项目根目录下面创建**vue.config.js**文件

module.exports = {
    devServer: {
      // overlay: { // 让浏览器 overlay 同时显示警告和错误
      //   warnings: true,
      //   errors: true
      // },
      // open: false, // 是否打开浏览器
      // host: "localhost",
      // port: "8080", // 代理断就
      // https: false,
      // hotOnly: false, // 热更新
      proxy: {
        "/api": {
          target: process.env.VUE_APP_API, // "http://localhost:6601", // 目标代理接口地址
          secure: false,
          changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
          // ws: true, // 是否启用websockets
          pathRewrite: {
            "^/api": "/"
          }
        }
      }
    }
  };

修改helloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ content}}</p>
  </div>
  <button id='btnTest' @click="btnClick()">点一下</button>
</template>

<script>
import axios from "axios";
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
   data() {
    return {
      content:''
    } 
  },
  mounted(){    
     // js代码中使用环境变量    
    axios.get("/api/hello").then(reg=>{   
            this.content = reg.data  
          }).catch(function(error){
            console.log(error);
          })
  },
  methods:{
    btnClick (){
      axios.get("/api/jdbc").then(reg=>{   
            this.content = reg.data  
          }).catch(function(error){
            console.log(error);
          })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

页面效果就出来了

至此，我们讲微服务与前端完全打通，可以进行实际业务开发了

4.开发一个简单的登录功能

4.1 Vuex的使用

用户登录时，我们首先想到的是用户信息的保存，官方语言就是状态管理，这就用到了Vuex

Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension ，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

Vuex 有五个核心概念：

• State: 单一状态树 作为一个“唯一数据源 (SSOT )”而存在，存储在Store中，每个应用只有一个store
• Getter：从store中的state获取我们想要的属性及值
• Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
• Action: 类似mutation 1. Action 提交的是 mutation，而不是直接变更状态；2.Action 可以包含任意异步操作。简单说类似于事件注册
• Module:将 store 分割成模块,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

根据上述Vuex的作用，我们先修改store/index.js文件

import { createStore } from "vuex";

// 存储用户信息
var state = {
    userinfo:{
      name: '',
      sex: null
    }
}
export default createStore({
  state: state,
  mutations: {},
  actions: {},
  modules: {}
});

在views文件夹下创建Login.vue,

<template>
  <div class="login">
      <p>这个是登录页</p>
      <el-button type="success">el-button</el-button>
  </div>
</template>

<script>
export default {
    name: 'Login',
    methods:{
        ...mapActions(['userLogin']),
        login(){
            let data = {
                name: 'zhangsan'
            }
            this.userLogin(data);
            this.$router.push("/");
        }
    }
}
}
</script>

<style>

</style>

注意，因为我用的是vue3.0,所以这块el-button使用的是element-plus

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

修改router/index.js

import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/Home.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About", 
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/Login.vue")
  }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});
//路由守护，当不存在session的时候，跳转至login
router.beforeEach((to, from, next) => {
  let session = localStorage.getItem('user');
  console.log(to);  
  if(to.name !== 'Login'){
    if(session){
      console.log("session存在")
      next();
    }else{
      console.log("session不存在")
      next({
        path: '/login',
      })
    }
  }else
  {
    next()
  }
  
});

export default router;

在store文件夹下增加actions.js,用来定义登录登出两个事件

const actions = {

     userLogin(content,data){
        console.log('登录userLogin...'+data.name)
        localStorage.setItem('user', JSON.stringify(data))
        localStorage.setItem('x-auth-token', data.token)
    },
    userlogout(){
        console.log('退出userlogout...')
        localStorage.removeItem('user')
        localStorage.removeItem('x-auth-token')
    }
}

export default actions

将actions赋给stroe

import { createStore } from "vuex";
import actions from './actions'
// 存储用户信息
var state = {
    userinfo:{
      name: '',
      sex: null
    }
}

export default createStore({
  state: state,
  mutations: {},
  actions: actions,
  modules: {}
});

4.2 模拟登录

修改Login.vue文件模拟登录

<template>
  <div class="login">
      <p>这个是登录页</p>
      <el-button type="success" @click="login">登录</el-button>
  </div>
</template>

<script>
// 将actions中的方法直接转为组件中的方法
import {mapActions} from 'vuex'

export default {
    name: 'Login',
    methods:{
        ...mapActions(['userLogin']),
        login(){
            //真实环境需要从回来请求回来数据，且也不能只存储姓名性别，主要是要后台标识的key
            let data = {
                name: '张三',
                sex: 1
            }
            //调用actions.js中userLogin方法，将数据保存起来
            this.userLogin(data);
            this.$router.push("/");
        }
    }
}
</script>

<style>

</style>

修改Home.vue，将刚才保存的信息展示出来

<template>
  <div class="home">
    <p>{{msg}}</p>
    <el-button class="primary" @click="logout" >退出</el-button>
  </div>  
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import {mapActions} from 'vuex'
export default {
  name: "Home", 
  data(){
    return {
      user:{
        name:'',
        sex: null
      },
      msg:'Welcome to Your Vue.js App'
    }
  },  
  mounted(){
    let userStorage = localStorage.getItem("user");
    userStorage = JSON.parse(userStorage);
      
    this.user.name = userStorage.name;       
    this.user.sex = userStorage.sex;
    this.msg="Welcome " + userStorage.name + (userStorage.sex?'先生':'女士')
  },
  methods:{
    ...mapActions(['userlogout']),
    logout(){
        //退出按钮功能，调用actions.js中userlogout方法，将保存的数据删除
        this.userlogout();
        this.$router.push('/login');
    }
  }
};


</script>

并且增加退出按钮功能

至此，一个简单的vue登录交互就完成了，下一步要尝试和后台打通

5.设置全局header头，传递token

想要设置全局heaher头，需要借助于axios的拦截器axios.interceptors

在项目目录下面增加一个utils/request.js用来封装axios的请求

  
'use strict';

import axios from 'axios'

//const baseURL = process.env.VUE_APP_API
//axios.defaults.baseURL = 'http://localhost:5001';
axios.defaults.timeout = 5000;

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么 
    let token = localStorage.getItem("x-auth-token");
    if (token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
        config.headers.token = `${token}`;
    }  
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });


export default axios;

修改项目主入口mian.js

import {createApp} from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import axios from "../src/utils/request"

const app = createApp(App);
app.config.globalProperties.$http =axios;
app.use(store)
  .use(router)
  .use(ElementPlus)
  .mount("#app");

// createApp(App)
//   .use(store)  
//   .use(router)
//   .use(ElementPlus)   
//   .mount("#app");

在使用的时候直接使用this.$http.post或者this.$http.get即可

 this.$http.post("/api/user/login/login", data).then(reg=>{
     var res = reg.data; 
     if(res.code === "0"){
         let user = res.content
         this.userLogin(user);
         this.$router.push("/");                  
     }else{
         this.$message(res.msg);    
     }         
 }).catch(e=>{
     this.$message("出错了");
     console.log(e)
 })             

这样所有的请求都会自动添加上token值传递到后台

下一章：5.增加网关Gateway