初始化前端项目

前端项目分为后台管理和前端页面，先搞后台，毕竟没有后台写前台页面也不好受，安装node和vue就不用说了。直接初始化项目，在目录web下。

使用的UI是ant-design

vue create admin

cnpm install --save ant-design-vue

cnpm install axios

然后引入，在babel.config.js中：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
	plugins: [
		    [
		      "import",
		      { libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css' }
		    ]
		  ]
}

可能引入会报错，如果报错Error: Cannot find module 'babel-plugin-import'，就执行npm install antd babel-plugin-import --save。

然后，最重要的一点！！！！大佬可以跳过，如果前端技术不是特别的强，一定要如此，在package.json文件中，把特喵的所有eslint有关的东西干掉！全都干掉！干掉他！！

或者找到.eslintrc.js的文件中,直接删除里边全部内容就可以了,但不要删除这个文件,否则会报错Error: No ESLint configuration found.

写页面就没有这么多花里胡哨了，按照自己的想法来即可。

把该引入的引入，该注册的注册，剩下的就是慢慢码了。

login.vue

<template>
    <div class="container">
        <div class="loginBox">
            <a-form-model ref="loginFormRef" :rules="rules" :model="formdata" class="loginForm">
                <a-form-model-item prop="username">
                    <a-input placeholder="账号" v-model="formdata.username">
                        <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                    </a-input>
                </a-form-model-item>
                <a-form-model-item prop="password">
                    <a-input placeholder="密码" type="password" v-model="formdata.password">
                        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                    </a-input>
                </a-form-model-item>
                <a-form-model-item class="loginButton">
                    <a-button type="primary" style="margin:10px" @click="login">登陆</a-button>
                    <a-button type="info" style="margin:10px" @click="resetform">取消</a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
    </div>
</template>

<script>
export default {
  data () {
		return {
      formdata: {
          username: '',
          password: ''
      },
	    rules: {
          username: [
              { required: true, message: '请输入管理员账号', trigger: 'blur' },
              { min: 4, max: 12, message: '用户名长度为4-12个字符', trigger: 'blur' },
          ],
					password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur' },
          ],
      }
    }
  },
	methods:{
		 resetform:function(){
			this.$refs.loginFormRef.resetFields()
		 },
		 login:function(){
			 this.$refs.loginFormRef.validate(async valid=>{
				 if(!valid) return this.$message.error("非法输入")
				 const { data:res } = await this.$http.post('api/v1/login/', this.formdata)
				 if(res.status != 200) return this.$message.error(res.message)
				 window.sessionStorage.setItem("token", res.token)
				 this.$router.push('admin')
			 })
		 }
	}
}

</script>

<style scoped>
    .container{
        height: 100%;
        background-color: aliceblue;
    }
    .loginBox{
        width: 450px;
        height: 300px;
        background-color: white;
        /* 绝对定位 */
				position: absolute;
        top: 50%;
        left: 70%;
				/* 旋转 */
        transform: translate(-50%, -50%);
				/* 圆角 */
        border-radius: 9px;
    }
    .loginForm{
        width: 100%;
        position: absolute;
				/* 距离底部边缘 */
        bottom: 10%;
        /* 设置内边距 */
				padding: 0 20px;
        box-sizing: border-box;
    }
    .loginButton{
        display: flex;
				/* 中央对齐 */
        justify-content: flex-end;
    }

</style>>

路由守卫

我们使用token来做验证，也要根据token来进行路由的守卫与拦截。

router.beforeEach((to, from , next)=>{
	const token = window.sessionStorage.getItem('token')
	if(to.name == 'login') return next()
	if(!token && to.name == 'admin'){
		next('login')
	}else{
		next()
	}
})

解释一下这个路由守卫，由于后台管理页面我就只打算做两个页面，然后通过子页面的方式来进行各种操作，所以我们只拦截admin，如果没有token的话，访问admin直接拦截到login。

在compose下新建三个vue文件Footer.vue和Nav.vue和Header.vue来作为子组件进行解藕。

在views下新建admin.vue父组件

<template>
		<a-layout class="container">
      <a-layout-sider>
				<div class="log">
					<span>Salmon blog</span>
				</div>
				<Nav></Nav>
			</a-layout-sider>
      <a-layout>
        
				<a-layout-header class="headerBtn">
					<a-button type="danger" @click="loginout">登出</a-button>
				</a-layout-header>
        
				<a-layout-content>
					<router-view></router-view>
				</a-layout-content>

        <a-layout-footer>
					<Footer></Footer>
				</a-layout-footer>
      </a-layout>
    </a-layout>
</template>

<script>
import Footer from '../components/admin/Footer.vue'
import Nav from '../components/admin/Nav.vue'
export default {
	components:{Footer, Nav},
	methods:{
		loginout(){
			window.sessionStorage.clear('token')
			this.$router.push('/login')
		}
	}

}
</script>

<style>
  .container {
		height: 100%;
	}
	.headerBtn{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.log{
		height: 32px;
		margin: 16px;
		background-color: aliceblue;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 17px;
	}

</style>