vue项目搭建

1.搭环境

安装node vscode vue

打开vscode

终端输入vue ui

 

 

 

 

 

 

 

 

 

 

 

 2.写项目

2.1 app.vue里保留 <router-view/>

2.2 main.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/dist/index.css'
const app = createApp(App)
app.use(store)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

2.3 router里添加路由

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

2.4 store里添加token

  getters: {
    GET_TOKEN: state => {
      return sessionStorage.getItem("token")
    }
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      return sessionStorage.getItem("token", token)
    }

  },

2.5 新建util.request添加拦截、请求和响应 注释掉core-js/fn/promise 不然报错

import axios from 'axios'
import store from '@/store'
// import { reject } from 'core-js/fn/promise';

let baseUrl = "http://localhost:9001"

//创建axios实例
const httpService = axios.create({
    baseURL:baseUrl,
    timeout:3000
});

//添加请求和响应拦截器
httpService.interceptors.request.use(function(config){
    console.log("store=" + store.getters.GET_TOKEN)
    config.headers.token = store.getters.GET_TOKEN
    return config;
}, function(error){
    return Promise.reject(error);
})

httpService.interceptors.response.use(function(config){
    return response;
}, function(error){
    return Promise.reject(error);
})

//网络请求响应
export function get(url, params = {}) {
    return new Promise((resolve, reject)=> {
        httpService({
            url: url,
            method: 'get',
            params: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        })
    })
}
export function post(url, params = {}) {
    return new Promise((resolve, reject)=> {
        httpService({
            url: url,
            method: 'post',
            params: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        })
    })
}
export function fileUpload(url, params = {}) {
    return new Promise((resolve, reject)=> {
        httpService({
            url: url,
            method: 'post',
            data: data,
            headers: {'Content-Type' : 'multipart/form-data'}
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        })
    })
}

export function getServerUrl(){
    return baseUrl;
}

export default {
    get,
    post,
    fileUpload,
    getServerUrl
}

2.6 写登录页面调用登录接口

<template>
    <div>
        <el-container style="width:300px" >
            <el-header>登录账号</el-header>
            <el-main>
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名">
                        <el-input type="test" v-model="ruleForm.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="Pass">
                        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
            <el-footer>底部</el-footer>
        </el-container>
    </div>
</template>
<script>
import requestUtil from '@/util/request'
import store from '@/store'
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.Pass !== '') {
            this.$refs.ruleForm.validateField('Pass');
          }
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let res = requestUtil.get("/login");
            let data = res.data;
            if(data.code==200) {
                const token = data.token;
                store.commit('SET_TOKEN', token);
            }else{
                console.log("error");
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

测试完毕