格式化

src/api/axios.js

@@ -24,7 +24,7 @@ import { Message } from 'element-ui';
   });
 
  */
-export function requestData (options) {
+export function requestData(options) {
   return new Promise((resolve, reject) => {
 
     if (options.showLoading) {
@@ -296,7 +296,7 @@ httpService.interceptors.response.use(
  *  url: 接口地址
  *  params: 参数，格式如下
  * */
-export function get (url, params = {}) {
+export function get(url, params = {}) {
   return new Promise((resolve, reject) => {
     httpService({
       url: url,
@@ -316,7 +316,7 @@ export function get (url, params = {}) {
  *  url: 接口地址
  *  params: 参数，格式如下
  * */
-export function post (url, params = {}) {
+export function post(url, params = {}) {
 
   return new Promise((resolve, reject) => {
     httpService({
@@ -337,7 +337,7 @@ export function post (url, params = {}) {
  *  url: 接口地址
  *  params: 参数，格式如下
  * */
-export function get_L (url, params = {}) {
+export function get_L(url, params = {}) {
   return new Promise((resolve, reject) => {
     httpService_L({
       url: url,
@@ -357,7 +357,7 @@ export function get_L (url, params = {}) {
  *  url: 接口地址
  *  params: 参数，格式如下
  * */
-export function post_L (url, params = {}) {
+export function post_L(url, params = {}) {
 
   return new Promise((resolve, reject) => {
     httpService_L({
@@ -376,7 +376,7 @@ export function post_L (url, params = {}) {
  *  url: 接口地址
  *  params: 参数，格式如下
  * */
-export function postL (url, params = {}) {
+export function postL(url, params = {}) {
 
   return new Promise((resolve, reject) => {
     axios.create({

src/store/getters.js

@@ -1,7 +1,7 @@
 const getters = {
   authToken: state => state.user.authToken,  //建立token的快捷访问   user 是因为index.js中导入的时候名称定义为user
   submitDDTag: state => state.submitDDTag,
-  loading:state =>state.loading,
+  loading: state => state.loading,
   username: state => state.user.username,
   themeName: state => state.themeName,
 }

src/store/index.js

@@ -7,7 +7,7 @@ Vue.use(Vuex)
 const state = {
   submitDDTag: false,   //提交 - 防抖动 - 针对快速请求问题的拦截机制
   loading: false,   //全局 - 加载中....
-  themeName:"light",
+  themeName: "light",
 };
 //改变状态的方法
 const mutations = {
@@ -17,12 +17,12 @@ const mutations = {
   loadingStore(state, tag) {
     state.loading = tag;
   },
-changeTheme (state, tag) {
+  changeTheme(state, tag) {
     state.themeName = tag;
   },
 };
 var vuexStore = new Vuex.Store({
-  modules:{
+  modules: {
     user//调用this['user/login']()  引用 ...mapActions(['user/login']),
   },
   getters,

src/store/modules/user.js

@@ -1,11 +1,11 @@
 // import {getToken,setToken,removeToken} from '@/utils/auth'
 import { Message } from 'element-ui';
 const state = {
-  authToken:localStorage.getItem('authToken') ? localStorage.getItem('authToken'):'', //设置token为共享状态   初始化vuex的时候 就先从缓存中读取
-  username:'',
+  authToken: localStorage.getItem('authToken') ? localStorage.getItem('authToken') : '', //设置token为共享状态   初始化vuex的时候 就先从缓存中读取
+  username: '',
 }
 const mutations = {
-  REMOVE_TOKEN(state){
+  REMOVE_TOKEN(state) {
     localStorage.removeItem('authToken');
     localStorage.removeItem('username');
     state.authToken = "";
@@ -17,12 +17,12 @@ const mutations = {
     setTimeout(() => {
       window.location.reload();
     }, 1000);
-    
+
   },
   SET_TOKEN: (state, token_name) => {
     state.authToken = token_name.token;
     state.username = token_name.username;
-	  localStorage.setItem('authToken', token_name.token);
+    localStorage.setItem('authToken', token_name.token);
     localStorage.setItem('username', token_name.username);
   },
   SET_NAME: (state, name) => {
@@ -30,16 +30,16 @@ const mutations = {
   },
 }
 const actions = {
-  async login(context,data){
+  async login(context, data) {
     const result = await login(data)
-    if(result.data.sucess){
+    if (result.data.sucess) {
       //调用vuex中setToken方法
-      context.commit('setToken',result.data.data)
+      context.commit('setToken', result.data.data)
     }
   }
 }
 export default {
-  namespaced:true,
+  namespaced: true,
   state,
   mutations,
   actions,

src/views/headPortrait.vue

@@ -1,50 +1,72 @@
 <template>
-<div class="head">
-  <el-popover
-  placement="bottom"
-  width="200"
-  trigger="click">
-  <div >
-    <p>你好{{name}}</p>
-    <el-divider></el-divider>
-  </div>
-  <div>
-    <el-link icon="el-icon-unlock" @click="loginout">退出登录<i class="-icon--right"></i> </el-link>
+  <div class="head">
+    <el-popover placement="bottom" width="200" trigger="click">
+      <div class="border">
+        <p id="character">你好:</p>
+        <p id="character-yh">{{ name }}</p>
+      </div>
+      <el-divider></el-divider>
+      <div class="btn">
+        <el-link icon="el-icon-unlock" @click="loginout"
+          >退出登录<i class="-icon--right"></i>
+        </el-link>
+      </div>
+
+      <el-button
+        style="border-radius: 50px"
+        icon="el-icon-user-solid"
+        type="info"
+        slot="reference"
+      ></el-button>
+    </el-popover>
   </div>
-  
-  <el-button style="border-radius:50px;" icon="el-icon-user-solid" type="info"  slot="reference"></el-button>
-</el-popover>
-</div>
 </template>
 
 <script>
-import { mapGetters,mapMutations} from 'vuex'
+import { mapGetters, mapMutations } from "vuex";
 
 export default {
-  
-  data () {
+  data() {
     return {
-      name:"",
-
-    }
+      name: "",
+    };
   },
   computed: {
-  // 使用对象展开运算符将 getter 混入 computed 对象中
-    ...mapGetters([
-      'username',
-    ])
+    // 使用对象展开运算符将 getter 混入 computed 对象中
+    ...mapGetters(["username"]),
   },
   created() {
-    this.name = this.username?this.username:localStorage.getItem('username');
+    this.name = this.username
+      ? this.username
+      : localStorage.getItem("username");
   },
   methods: {
     ...mapMutations("user", ["REMOVE_TOKEN"]),
-    loginout(){
+    loginout() {
       this.REMOVE_TOKEN();
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style>
+.border {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#character {
+  display: flex;
+
+  font-size: 16px;
+}
+#character-yh {
+  font-size: 25px;
+  margin-left: 6px;
+}
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>