Vue前端工程

创建一个工程化的vue项目

npm init vue@latest

全默认回车就好了

登录注册校验 

//定义数据模型
const registerData=ref({
  username:'',
  password:'',
  rePassword:''
})
//校验密码的函数
const checkRePassword=(rule,value,callback)=>{
  if (value===''){
    callback(new Error('请再次输入密码'))
  }else if (value!==registerData.value.password){
    callback(new Error('请确保两次输入的密码一样'))
  }else {
    callback()
  }
}
//定义表单校验规则
const rules={
  username:[
    {required:true,message:'请输入用户名',trigger:'blur'},
    {min:5,max:16,message:'长度为5-16为非空字符',trigger:'blur'}
  ],
  password:[
    {required:true,message:'请输入密码',trigger:'blur'},
    {min:5,max:16,message:'长度为5-16为非空字符',trigger:'blur'}
  ],
  rePassword:[
    {validator:checkRePassword,trigger:'blur'}
  ]
}

路由

路由，决定从起点到终点的路径的进程
在前端工程中，路由指的是根据不同的访问路径，展示不同组件的内容

vue-router的使用步骤

1、安装vue-router  npminstall vue-router@4

npm install vue-router@4

2、在src/router/index.js中创建路由器，并导出

index.js：

import {createRouter,createWebHistory} from 'vue-router'

//导入组件
import  LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'

//定义路由关系
const routes=[
    {path:'/login',component:LoginVue},
    {path:'/',component:LayoutVue}
]

//创建路由器
const router=createRouter({
    history:createWebHistory(),
    routes:routes
})

//导出路由
export default router

3、在vue应用实例中使用vue-router

import './assets/main.scss'

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from  '@/router'

import App from './App.vue'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

4、声明router-view标签，展示组件内容

<script setup>


</script>

<template>
<router-view></router-view>
</template>

那么现在如何实现登录页面的跳转呢？

先导入userRouter模块

import {useRouter} from 'vue-router'
const router = useRouter()

在登陆成功时，使用router.push

 子路由

1、配置子路由

import {createRouter,createWebHistory} from 'vue-router'

//导入组件
import  LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'

import ArticleCategory from "@/views/article/ArticleCategory.vue";
import ArticleManage from "@/views/article/ArticleManage.vue";
import UserAvatar from "@/views/user/UserAvatar.vue";
import UserInfo from "@/views/user/UserInfo.vue";
import UserResetPassword from "@/views/user/UserResetPassword.vue";

//定义路由关系
const routes=[
    {path:'/login',component:LoginVue},
    {path:'/',component:LayoutVue,children:[
            {path:'/article/category',component:ArticleCategory},
            {path:'/article/manage',component:ArticleManage},
            {path:'/user/avatar',component:UserAvatar},
            {path:'/user/info',component:UserInfo},
            {path:'/user/resetPassword',component:UserResetPassword}
        ]}
]

//创建路由器
const router=createRouter({
    history:createWebHistory(),
    routes:routes
})

//导出路由
export default router

2、声明router-view标签

在所需要的地方添加

3、为菜单项 el-menu-item 设置index属性，设置点击后的路由路径

但是这个时候当我们刚进入这个页面的时候，中间页面是不显示东西的

这时就可以在index.js里加入重定向

当登录进来的时候就会直接跳转到默认页面 

Pinia状态管理库

Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态

使用pinia的步骤

1、安装pinia npminstall pinia

npm install pinia

2、在vue应用实例中使用pinia

3、在src/stores/token.js中定义store

//定义store
import {defineStore} from 'pinia'
import {ref} from 'vue'
/**
 * 第一个参数：名字，唯一性
 * 第二个参数：函数，函数内部可以定义状态的所有内容
 *
 * 返回值：函数
 */
export const useTokenStore=defineStore('token',()=>{
    //定义状态和内容
    //1、响应式变量
    const token=ref('')

    //2、定义一个函数，修改token的值
    const setToken=(newToken)=>{
        token.value=newToken
    }
    //3、函数,移除token的值
    const removeToken=()=>{
        token.value=''
    }
    return {
        token,setToken,removeToken
    }
});

4、在组件中使用store

但是这个时候页面刷新的话就会出现服务异常，我们可以使用下面的Pinia持久化插件-persist来解决

Pinia持久化插件-persist

Pinia默认是内存存储，当刷新浏览器的时候会丢失数据。Persist插件可以将pinia中的数据持久化的存储

使用Pinia持久化插件-persist

1、安装persist npm install pinia-persistedstate-plugin

npm install pinia-persistedstate-plugin

2、在pinia中使用persist

3、定义状态Store时指定持久化配置参数

未登录统一处理

在reques.js里导入

import router from '@/router'

并添加判断响应状态码的代码

完整的request.js代码

//定制请求的实例

//导入axios  npm install axios
import axios from 'axios';

import { ElMessage } from 'element-plus'
//定义一个变量,记录公共的前缀  ,  baseURL
//const baseURL = 'http://localhost:8080';
const baseURL = '/api';
const instance = axios.create({baseURL})

import {useTokenStore} from "@/stores/token.js";
//添加请求拦截器
instance.interceptors.request.use(
    (config)=>{
        //请求前的回调
        //添加token
        const tokenStore= useTokenStore();
        //判断有没有token
        if (tokenStore.token){
            config.headers.Authorization=tokenStore.token
        }
        return config;
    },
(err)=>{
        //请求错误的回调
    Promise.reject(err)
}
)
/*import {useRouter} from "vue-router";
const router = useRouter();*/
import router from '@/router'
//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        //判断业务状态码
        if (result.data.code===0){
            return result.data;
        }
        //操作失败
        /*alert(result.data.msg?result.data.msg:'服务异常')*/
        ElMessage.error(result.data.msg?result.data.msg:'服务异常')
        //异步操作的状态转化为失败
        return Promise.reject(result.data)
    },
    err=>{
        //判断响应状态码，如果为401则证明未登录，提示请登录，并跳转到登陆页面
        if (err.response.status===401){
            ElMessage.error('请先登录')
            router.push('/login')
        }else {
            ElMessage.error('服务异常')
        }
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;

富文本编辑器的使用

文章内容需要使用到富文本编辑器，这里咱们使用一个开源的富文本编辑器 Quill

官网地址： VueQuill | Rich Text Editor Component for Vue 3

安装

npm install @vueup/vue-quill@latest --save

导入组件和样式

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

 使用quill组件

<quill-editor
              theme="snow"
              v-model:content="articleModel.content"
              contentType="html"
              >
</quill-editor>

样式美化

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}

---

这一期就先说到这啦

努力遇见更好的自己！！！