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)=>{//请求前的回调//添加tokenconst tokenStore= useTokenStore();//判断有没有tokenif (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-editortheme="snow"v-model:content="articleModel.content"contentType="html">
</quill-editor>

样式美化

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

---

这一期就先说到这啦

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