代码公共内容

react 配置路由

import React, { Component } from 'react'
import {Route,Redirect,Switch} from "react-router-dom"
import Home from "../views/home.jsx"
import Phone from "../views/phone.jsx"
import No from "../views/no.jsx"

export default class index extends Component {
    render() {
        return (
            <div>
                <Switch>
                <Route path="/home" component={Home}/>
                <Route path="/phone" component={Phone}/>
                <Redirect from="/" to="/home" exact/>
                <Route component={No}/>
                </Switch>
            </div>
        )
    }
}

mongose 封装

let mongoose=require("mongoose");
mongoose.connect("mongodb://localhost:27017/user",{ useNewUrlParser: true,useUnifiedTopology: true })

// 开始连接
let db=mongoose.connection;
db.on("error",console.error.bind(console,"连接错误"))
db.on("open",()=>{
    console.log("连接ok")
})

let userSchema=mongoose.Schema({
    uname:String,
    upwd:String
})

let coldemo=mongoose.model("lists",userSchema)

module.exports=coldemo

解决vuex刷新内容丢失的问题

  created () {
        //在页面加载时读取localStorage里的状态信息
        if (localStorage.getItem("data") ) {
            //replaceState替换数据 Object.assign合并对象
            this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("data"))))
        } 
        //在页面刷新时将vuex里的信息保存到localStorage里
        window.addEventListener("beforeunload",()=>{
            localStorage.setItem("data",JSON.stringify(this.$store.state))
        })
      },

请求拦截封装器

import axios from "axios"
// 创建axios 赋值给常量service 
const service = axios.create();

// 添加请求拦截器（Interceptors）
service.interceptors.request.use(function (config) {
    // 发送请求之前做写什么
    return config;
  }, function (error) {
    // 请求错误的时候做些什么
    return Promise.reject(error);
  });

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

vueconfig.js文件夹内容如下

module.exports={
        //给文件夹起别名
    configureWebpack:{
        resolve:{
            alias:{
            // "别名":"对应的文件夹"
            "c":"@/components",
            "u":"@/util",
            "a":"@/api"
            }
        },
    },
    devServer:{
        open:true, //设置自动开启
        port:8888,//修改端口，修改完配置文件要记得重启
    
// 当需要进行跨越的时候可以设置如下的此代码

	proxy: {
            '/api': {
              target: 'http://localhost:3000/', //对应自己的接口
              changeOrigin: true,
              ws: true,
              pathRewrite: {
                '^/api': ''
              }}
             }

}
}

取消滚动条

::-webkit-scrollbar { width: 0; height: 0; color: transparent; }