vue--注册登录、请求封装（axios，基地址，本地存储的封装）（vue脚手架的目录详解）---demo

前端用axios的时候

在axios内使用params 传递参数的方法：

​	实例： www.mindjs.cn/productlist?page=1

​    在nodejs的后台接口中 需要使用req.query来  接收



data传递参数的方法：

  实例： www.mindjs.cn/product

​	在nodejs的后台接口中 需要使用req.body 来接收



前端占位符 :id

 实例 :www.mindjs.cn/product/1a2zxc21anc

 在nodejs的后台接口中需要使用 req.params 来接收

随便写几个文件,详细的去7.14号的文件里文件看
有底部导航切换，有登录，注册，config.js、auth.js、request.js文件

App.vue

<template>
  <div id="app" class="container">
    <div class="header">小乖-shopping</div>
    <router-view class="content"></router-view>
    <ul class="footer" v-show="isShowFooter">
      <li :class="currentIndex==0?'active':''" @click="navTo('Home',0)">
        <i class="fa fa-home"></i>
        <span>首页</span>
      </li>
      <li :class="currentIndex==1?'active':''" @click="navTo('Hot',1)">
        <i class="fa fa-fire"></i>
        <span>热卖</span>
      </li>
      <li :class="currentIndex==2?'active':''" style="position:relative;" @click="navTo('Cart',2)">
        <span class="dot" v-show="$store.state.cartCount>0">{{$store.state.cartCount}}</span>
        <i class="fa fa-shopping-cart"></i>
        <span>购物车</span>
      </li>
      <li :class="currentIndex==3?'active':''" @click="navTo('User',3)">
        <i class="fa fa-user"></i>
        <span>我的</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentIndex: 0,
      isShowFooter: true
    }
  },
  watch: {
    $route(v) {
      if (v.meta.isShowFooter) {
        this.isShowFooter = false
      } else {
        this.isShowFooter = true
      }
    }
  },
  methods: {
    navTo(name, index) {
      this.currentIndex = index
      this.$router.push({ name: name }).catch(() => {})
    }
  }
}
</script>
<style >
* {
  margin: 0;
  padding: 0;
}
html,
body,
#app,
.container {
  width: 100%;
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
}
.container .header {
  height: 40px;
  text-align: center;
  background: rgb(14, 184, 184);
  line-height: 40px;
  color: rgb(0, 0, 0);
  font-weight: 900;
}
.container .content {
  flex: 1;
  overflow: auto;
}
.container .footer {
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgb(14, 184, 184);
  color: rgb(0, 0, 0);
}
ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
ul li i::before {
  font-size: 22px;
}
ul li span {
  font-size: 10px;
}
ul li.active {
  color: rgb(255, 255, 255);
  font-weight: 900;
}

.dot {
  background: palevioletred;
  color: white;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  position: absolute;
  padding: 0.02rem;
  top: -10px;
  left: 16px;
  text-align: center;
}
</style>

main.js

import Vue from 'vue'
// import Vuex from 'vuex'
import App from './App.vue'
import router from './router'

import store from './store'
import './assets/styles/main.css'

Vue.config.productionTip = false
// Vue.use(Vuex)

/* const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    plus(state, step = 1) {
      state.count += step
    },
    reduce(state) {
      state.count--
    }
  }
}) */

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Login.vue

<template>
  <div class="login">
    <h1>登录页</h1>
    <ul>
      <li>
        <input type="text" v-model="userName" placeholder="请输入用户名" />
      </li>
      <li>
        <input type="password" v-model="password" placeholder="请输入密码" />
      </li>
      <li>
        <button @click="loginHandle">登录</button>
      </li>
      <li>
        <router-link :to="{name:'Reg'}" class="reg-link">没有账号，我要注册</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { login } from '../services/user'
import { setToken } from '../utils/auth'
export default {
  data() {
    return {
      userName: '',
      password: ''
    }
  },
  methods: {
    /* loginHandle() {
      const data = {
        userName: this.userName,
        password: this.password
      }
      login(data)
    } */

    async loginHandle() {
      if (this.userName && this.password) {
        const res = await login({
          userName: this.userName,
          password: this.password
        })
        console.log(res)
        if (res.code === 'success') {
          setToken(res.token)
          this.$router.push({ name: 'Home' })
        } else {
          alert(res.message)
        }
      } else {
        alert('请输入用户名和密码')
      }
    }
  }
}
</script>

<style scoped>
.login {
  /* text-align: center; */
  /* margin: 0.3rem auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  margin-top: 20px;
}
ul li {
  margin: 0.05rem 0;
  width: 100%;
}
li input {
  width: 2rem;
  height: 0.3rem;
  font-size: 0.14rem;

  border: none;
  border-bottom: 0.01rem solid rgb(156, 155, 155);
}
li button {
  width: 1rem;
  height: 0.3rem;
  background: blueviolet;
  color: white;
  line-height: 0.3rem;
  border-radius: 0.06rem;
  border: none;
  font-size: 0.14rem;
}
.reg-link {
  float: right;
  font-size: 0.1rem;
  width: 100%;
  display: block;
}
</style>

Reg.vue

<template>
  <div class="reg">
    <h1>注册</h1>
    <ul>
      <li>
        <div>
          <input type="file" style="display:none" ref="file" @change="fileSelected" />
          <img :src="imgUrl" alt @click="changeImg" />
        </div>
      </li>
      <li>
        <input type="text" v-model="nickName" placeholder="请输入昵称" />
      </li>
      <li>
        <input type="text" v-model="userName" placeholder="请输入用户名" />
      </li>
      <li>
        <input type="password" v-model="password" placeholder="请输入密码" />
      </li>
      <li>
        <input type="password" v-model="rePassword" placeholder="请再次输入密码" />
      </li>
      <li>
        <button @click="regHandle">注册</button>
      </li>
      <li>
        <router-link :to="{name:'Login'}" class="reg-link">已有帐号，我要登陆</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
// 导出默认的
import request from '../utils/request'
import { serverUrl } from '../utils/config'
import { reg } from '../services/user'
import { setToken } from '../utils/auth'

export default {
  data() {
    return {
      avatar: '',
      nickName: '',
      userName: '',
      password: '',
      rePassword: '',
      imgUrl: require('../assets/images/up.jpg')
    }
  },
  methods: {
    changeImg() {
      this.$refs.file.click()
    },
    async fileSelected(e) {
      console.log(e)
      const formData = new FormData()
      formData.append('file', e.currentTarget.files[0])
      const res = await request.post('/api/v1/common/file_upload', formData, {
        headers: {
          'Coontent-Type': 'multipart/form-data'
        }
      })
      // console.log(res)
      this.avatar = res.info
      this.imgUrl = serverUrl + res.info
    },
    async regHandle() {
      if (
        this.avatar === '' &&
        this.nickName === '' &&
        this.userName === '' &&
        this.password === ''
      ) {
        alert('请您将信息填写完整')
        return
      }
      if (this.password !== this.rePassword) {
        alert('两次输入的密码不一致')
        return
      }
      const res = await reg({
        avatar: this.avatar,
        nickName: this.nickName,
        userName: this.userName,
        password: this.password
      })
      // console.log(res)
      if (res.code === 'success') {
        alert('恭喜您注册成功')
        setToken(res.token)
        this.$router.push({ name: 'Login' })
      } else {
        alert(res.message)
      }
    }
  }
}
</script>

<style scoped>
.reg {
  /* text-align: center; */
  /* margin: 0.3rem auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  height: 100%;
}
ul li {
  width: 100%;
  height: auto;
}
ul li:first-child {
  margin: 15px 0;
  height: 100px;
}
ul li:first-child div {
  width: 100px;
  max-height: 100px;
  border-radius: 50%;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
ul li:first-child div input {
  width: 100%;
  height: 100%;
}
ul li:first-child div img {
  max-height: 100px;
}
li input {
  width: 2rem;
  height: 0.3rem;
  font-size: 0.14rem;

  border: none;
  border-bottom: 0.01rem solid rgb(156, 155, 155);
}
li button {
  width: 1rem;
  height: 0.3rem;
  background: blueviolet;
  color: white;
  line-height: 0.3rem;
  border-radius: 0.06rem;
  border: none;
  font-size: 0.14rem;
  margin: 0.05rem 0;
}
.reg-link {
  float: right;
  font-size: 0.1rem;
  width: 100%;
  display: block;
}
</style>

request.js

import axios from 'axios'

const instance = axios.create({
  timeout: 5000,
  baseURL: 'http://localhost:3009'
})

instance.interceptors.request.use(
  function(config) {
    config.headers.token = 'haha'
    return config
  },
  function(error) {
    return Promise.reject(error)
  }
)
// 默认导出
export default instance

instance.interceptors.response.use(
  function(response) {
    return response.data
  },
  function(error) {
    return Promise.reject(error)
  }
)

export function get(url, params) {
  return instance.get(url, { params })
}

export function post(url, data) {
  return instance.post(url, data)
}

export function put(url, data) {
  return instance.put(url, data)
}

export function del(url, data) {
  return instance.delete(url, data)
}

auth.js

export function setToken(val) {
  return localStorage.setItem('token', val)
}

export function removeToken() {
  return localStorage.removeItem('token')
}

export function getToken() {
  return localStorage.getItem('token')
}

export function isLogin() {
  if (getToken) {
    return true
  } else {
    return false
  }
}

config.js

export const serverUrl = 'http://localhost:3009'