最近状态有点懈怠 又要开始着手敲代码了 此篇为勉励篇
首先看一下使用的工具
webstrom
这个工具相对于其他的工具我认为是不错的,
可以很好的进行代码调试
首先看一下建立好的目录结构
网络请求使用axios
user.js
// 用户登录的请求模块import request from '@/utils/request'export const login = data => { return request({ method: 'POST', url: '/mp/v1_0/authorizations', data })}// 获取用户信息export const getUserProfile = () => { const user = JSON.parse(window.localStorage.getItem('user')) console.log(user) return request({ method: 'GET', url: '/mp/v1_0/user/profile', // axios通过headers headers: { Authorization: `Bearer ${user.token}` } })}
主入口程序
main.js
import Vue from 'vue'import App from './App.vue'import router from './router'import './styles/index.less'// 加载组件库import ElementUI from 'element-ui'// 加载样式import 'element-ui/lib/theme-chalk/index.css'Vue.config.productionTip = false// 注册组件库Vue.use(ElementUI)new Vue({ router, render: h => h(App)}).$mount('#app')
首页组件
home.vue
<template> <div class="home-container">首页div>template><script>export default { name: 'HomeIndex', data () { return { } }}script><style scoped lang="less">style>
侧边栏
aside.vue
<template> <el-menu class="nav-menu el-menu-vertical-demo" :default-active="$route.path" background-color="#002033" text-color="#fff" active-text-color="#ffd04b" router > <el-menu-item index="/"> <i class="el-icon-s-home">i> <span slot="title">首页span> el-menu-item> <el-menu-item index="/article"> <i class="el-icon-document">i> <span slot="title">内容管理span> el-menu-item> <el-menu-item index="/image"> <i class="iconfont iconimage">i> <span slot="title">素材管理span> el-menu-item> <el-menu-item index="/publish"> <i class="iconfont iconpublish">i> <span slot="title">发布文章span> el-menu-item> <el-menu-item index="/comment"> <i class="iconfont iconcomment">i> <span slot="title">评论管理span> el-menu-item> <el-menu-item index="/fans"> <i class="el-icon-setting">i> <span slot="title">粉丝管理span> el-menu-item> <el-menu-item index="/settings"> <i class="el-icon-setting">i> <span slot="title">个人设置span> el-menu-item> el-menu>template><script>export default { name: 'AppAside', methods: { handleOpen (key, keyPath) { console.log(key, keyPath) }, handleClose (key, keyPath) { console.log(key, keyPath) } }}script><style scoped lang="less">.nav-menu { .iconfont { margin-right: 10px; padding-left: 5px; }}style>
整体组件 侧边栏和导航栏要固定
index.vue
<template> <el-container class="layout-container"> <el-aside class="aside"> <app-aside class="aside-menu">app-aside> el-aside> <el-container> <el-header class="header"> <div> <i class="el-icon-s-fold">i> <span>江苏传智播客科技教育有限公司span> div> <el-dropdown> <div class="avatar-wrap"> <img class="avatar" :src="user.photo" alt=""> <span>{{user.name}}span> <i class="el-icon-arrow-down el-icon--right">i> div> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>设置el-dropdown-item> <el-dropdown-item>退出el-dropdown-item> el-dropdown-menu> el-dropdown> el-header> <el-main class="main"> <router-view />el-main> el-container> el-container>template><script>import AppAside from './component/aside'import { getUserProfile } from '@/api/user'export default { name: 'LayoutIndex', components: { AppAside }, component: { AppAside }, data () { return { user: {} } }, created () { this.loadUserProfile() }, methods: { loadUserProfile () { // 这个接口需要授权才能使用 getUserProfile().then(res => { console.log(res) this.user = res.data.data }) } }}script><style scoped lang="less">.layout-container{ position: fixed; left:0; right:0; top:0; bottom: 0;}.aside{ width: 100px; background-color: #d3dce6; .aside-menu{ height: 100%; }}.header{ height: 60px; background-color: #b3c0d1; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ccc;}.main{ background-color: #e9eef3;}.avatar-wrap{ display: flex; align-items: center; .avatar{ width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; }}style>
路由
router.js
import Vue from 'vue'import VueRouter from 'vue-router'// @表示src路径的别名 好处就是它不受当前文件路径影响import Login from '@/views/login/index'import Home from '@/views/home/home'import Layout from '@/views/layout/index'Vue.use(VueRouter)// 路由配置表const routes = [{ path: '/login', name: 'login', component: Login},{ path: '/', /* name: 'layout', */ component: Layout, children: [{ path: '', // path为空 会作为默认子路由 name: 'home', component: Home }]}]const router = new VueRouter({ routes})export default router
登录
index.vue
<template> <div class="login-container"> <div class="login-head">div> <el-form class="login-form" ref="login-form" :model="user" :rules="formRules"> <el-form-item prop="mobile"> <el-input v-model="user.mobile" placeholder="请输入手机号">el-input> el-form-item> <el-form-item prop="code"> <el-input v-model="user.code" placeholder="请输入验证码">el-input> el-form-item> <el-form-item prop="agree"> <el-checkbox v-model="user.agree">我已阅读并同意用户协议和隐私条款el-checkbox> el-form-item> <el-form-item> <el-button class="login-btn" type="primary" :loading="loginLoading" @click="onLogin">登录el-button> el-form-item> el-form> div>template><script>import { login } from '@/api/user'export default { name: 'LoginIndex', components: { }, props: {}, data () { return { user: { mobile: '13911111111', // 手机号 code: '246810', // 验证码 agree: false// 是否同意协议 }, loginLoading: false, // 登录的loding状态 /* checked: false, // 是否同意协议 */ formRules: { mobile: [{ required: true, message: '手机号不能为空', trigger: 'change' }, { pattern: /^1[3|5|7|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' } ], code: [{ required: true, message: '验证码不能为空', trigger: 'change' }, { pattern: /^\d{6}$/, message: '请输入正确的验证码格式', trigger: 'change' } ], agree: [{ // 调用 validator: (rule, value, callback) => { console.log(value) if (value) { callback() } else { callback(new Error('请同意用户协议')) } }, trigger: 'change' }] } } }, methods: { onLogin () { // 获取表单数据 // const user = this.user // 触发表单验证 validate是异步 this.$refs['login-form'].validate((valid, err) => { console.log(valid) console.log(err) // 如果 if (!valid) { return } this.login() }) }, login () { // 开启loading this.loginLoading = true // 验证通过 // 请求直接封装 login(this.user).then(res => { console.log(res) this.$message({ message: '登录成功', type: 'success' }) this.loginLoading = false // 跳转到首页 window.localStorage.setItem('user', JSON.stringify(res.data.data)) // 将接口返回的数据接收 this.$router.push({ name: 'home' }) }).catch(err => { console.log('登录失败', err) this.$message.error({ message: '手机号或者验证码错误', type: 'warning' }) this.loginLoading = false }) } }}script><style scoped lang="less">.login-container{position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; background: url("./login_bg.jpg") no-repeat; background-size: cover; .login-head{ width: 300px; height: 57px; background:url("./logo_index.png") no-repeat; margin-bottom: 30px; } .login-form{ background-color: #fff; padding: 50px; min-width: 300px; .login-btn{ width: 100%; } }}style>
差不多这些了
服务启动
登入
目前节点token
记得Github提交代码呀
结束 继续保持 勉励篇