Vue写项目后台02

在安装好node.js的前提下
使用cmd(管理员运行)安装vue
npm install --g vue-cli
安装好vue之后，开始初始化项目
vue init webpack music
一路回车y就可以了
此时初始化的项目有router
在music项目目录下
输入如下命令安装 element-ui组件
npm i element-ui -S
输入如下命令安装axios（axios:封装好的ajax请求）
npm install axios–save-dev
输入如下命令安装vuex
npm install vuex --save

ok~~~自此，一个vue项目vue+vuex+router+axios+element-ui就安装好了

输入如下命令安装项目依赖
npm install
输入如下命令启动项目
npm run dev

router目录下的index.js是路由文件，控制页面跳转
mixins目录下的Index.js是工具文件，做一些数据处理
pages目录下就是页面文件
components目录下公共页面文件
main.js是全局变量挂载的地方，引入的element-ui,router在main.js引入之后全局都可使用

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' // 路由

import ElementUI from 'element-ui'  // element-ui文件
import 'element-ui/lib/theme-chalk/index.css'// element-ui文件


import './assets/css/main.css'  // 全局自定义css文件

Vue.config.productionTip = false


Vue.use(ElementUI)  // 使用element-ui
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,   // 路由
  components: { App },
  template: '<App/>'
})

router.index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Login from '@/pages/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login // 引入上面引入的文件跳转方式
    },
    {
      path:"/Info",   // 页面切换路径
      component:resolve => require(['../pages/Info.vue'],resolve)  // 这种直接定义到页面的跳转方式
      }
  ]
})

pages.Info

<template>


  <div>
    后台首页
  </div>


</template>

<script>
</script>

<style>
</style>

pages.Login.vue

<template>
  <div id="div01">
     <div id="login-title">欢迎访问音乐网站</div>
     <div id="login-wrap">
<!-- element-ui组件 -->

<!-- :model双向数据绑定，rules验空 -->
       <el-form
       :model="loginmodel"
       :rules="rules">
       <!-- 验空提示元素 -->
       <el-form-item prop="username">
         <!-- element-ui输入文本控件 -->
         <el-input placeholder="用户名" v-model="loginmodel.username"></el-input>
       </el-form-item>

       <!-- 验空提示元素 -->
       <el-form-item prop="password">
         <!-- element-ui输入文本控件（password） -->
         <el-input placeholder="密码" v-model="loginmodel.password" type="password"></el-input>
       </el-form-item>

<!-- element-ui提交按钮 -->
<div id="login-btn"> <el-button type="primary" @click="submitFrom">登录</el-button></div>
       </el-form>

     </div>
  </div>
</template>

<script>
  import {Login }from '../api/index' // 引入Login方法axios请求
  import {mixin} from '../mixins'    // 引入mixin提示信息
  export default{
  mixins:[mixin],// 函数内部导出提示信息
data:function(){   // 数据函数
return{
loginmodel:{   // 双向数据绑定
  username:'admin',
  password:'123'
},
rules:{    // 验证规则，验空
  username:[
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password:[
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
}
}
},
methods:{  // @click方法
  submitFrom(){
   let params=new URLSearchParams();
   params.append('username',this.loginmodel.username)
   params.append('password',this.loginmodel.password)
   console.log(this.loginmodel.username)
   Login(params)  // 将参数传入Login()方法
   .then(res=>{
     if(res.code===1){
       this.$router.push("/Info")  // 路由跳转
       this.notify('欢迎回来','success')
     }else{
       this.notify('登录失败','error')
     }
   })
   .catch(err=>{
     console.log(err)
   })
  }
}
  }
</script>

<style>
  /* css样式 */
#div01{
  position: relative;
  background: url(../assets/img/background.jpg);
  width: 100%;
  height: 100%;
  background-size: cover;
}
#login-title{
  position: absolute;
   color: #FFFFFF;
   position: absolute;
   font-size: 30px;
   margin-top: 100px;
   margin-left: 500px;
}
#login-wrap{
  position: absolute;
  background-color: #DDDDDD;
  width: 400px;
  height: 300px;
border-radius: 10px;
margin-left: 450px;
margin-top: 150px;
padding: 20px;
}
#login-btn{
 text-align: center;
}
#login-btn button{
  width: 100%;
  height: 36px;
}
</style>

mixins.index.js

export const mixin={
  methods:{
    notify(title,type){
      this.$notify({
        title:title,
        type:type
      })
    }
  }
}

api.http.js

import axios from 'axios';
axios.defaults.timeout=5000;  // 设置请求超时时间为5秒
axios.defaults.withCredentials=true;// 设置跨域为正确
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

axios.defaults.baseURL='http://localhost:8888'

// 响应拦截器
axios.interceptors.response.use(
  response => {
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
    // 否则的话抛出错误
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是2开头的的情况
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        case 401:
          router.replace({
            path: '/',
            query: {
              redirect: router.currentRoute.fullPath
            }
          });
          break;
        case 403:
          // console.log('管理员权限已修改请重新登录')
          // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
          setTimeout(() => {
            router.replace({
              path: '/',
              query: {
                redirect: router.currentRoute.fullPath
              }
            });
          }, 1000);
          break;

        // 404请求不存在
        case 404:
          // console.log('请求页面飞到火星去了')
          break;
      }
      return Promise.reject(error.response);
    }
  });



/**
   * 封装get方法
   * @param url
   * @param data
   * @returns {Promise}
   */

export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err)
      })
  })
}


/**
   * 封装post请求
   * @param url
   * @param data
   * @returns {Promise}
   */

export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}

api.index.js

import {get,post} from './http'

// 登录方法
export const Login=(params)=>post(`admin/login/status`, params)

自此整个项目就差不多了
vue跨域失败，后台springboot版本有很大关系
2.4以上版本的跨域设置不一样（自行百度）
2.4以下的版本跨域设置

package com.example.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * 设置跨域
 */
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowCredentials(true);
    }
}

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.1.RELEASE</version>

        <relativePath/> <!-- lookup parent from repository -->
    </parent>