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 router3、在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-plugin2、在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;}
}这一期就先说到这啦
努力遇见更好的自己！！！
