路由嵌套
- 路由配置
{
path: '/admin',
name: 'admin',
component: () => import('../views/AdminView.vue'), http://localhost:5173/admin
children:[
{
path: 'home',
name: 'home',
component: () => import('../views/HomeView.vue') http://localhost:5173/admin/home
},
{
path: 'info',
name: 'info',
component: () => import('../views/InfoView.vue') http://localhost:5173/admin/info
},
]
}
- 页面关系
- AdminView.vue
<div class="header">
<router-link>HOME</router-link> http://localhost:5173/admin/home
<router-link>INFO</router-link> http://localhost:5173/admin/info
</div>
<div>
<router-view/> 子路由组件显示在这里
</div>
注意：父路由的组件中定义<router-view/>，用于显示子路由中的内容。import {createRouter, createWebHistory} from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/login',
name: 'login',
component: () => import('../views/LoginView.vue')
},
{
path: '/admin',
name: 'admin',
component: () => import('../views/AdminView.vue'),
children: [
{
path: 'mine',
name: 'mine',
component: () => import('../views/MineView.vue'),
},
{
path: 'order',
name: 'order',
component: () => import('../views/OrderView.vue'),
}
]
}
]
})
export default router
编程式导航
<template>
<h1>INFO</h1>
</template>
<script setup>
import {useRouter} from "vue-router"
const router = useRouter()
router.push({path: "/admin/mine"})
router.push({name: "login"})
router.push({name: "login", params: {nid: 100}, query: {page: 100}})
</script>
<style scoped>
</style>
router.replace
vue+router实现单页面应用：
历史记录 = [A,B,C,D,新页面]
导航守卫
- 浏览器的本地存储
- cookie，有效期+保存
- document.cookies = ...
- localStorage 保存
localStorage.setItem(key,value)
localStorage.getItem(key)
localStorage.removeItem(key)
localStorage.clear()
- sessionStorage 关闭浏览器，自动消失
sessionStorage.setItem(key,value)
sessionStorage.getItem(key)
sessionStorage.removeItem(key)
sessionStorage.clear()index.js
// router.beforeEach(function (to,from,next){})
router.beforeEach((to, from, next) => {
//1.访问登录页面，不需要登录就可以直接去查看
if ( === "login") {
next()
return
}
//2.检查用户登录状态（登录成功，继续往后走next()； 未登录，跳转到登录页面）
let username = localStorage.getItem("name")
if (!username) {
next({name: "login"})
return;
}
//3.登录成功且获取用户信息，继续向后访问
next()
})
export default routerAdminView.vue
<template>
<div class="pg-header">
<div class="container">
<router-link to="/admin/mine">我的</router-link>
<router-link to="/admin/order">订单</router-link>
<div >
<a @click="doLogout">退出</a>
</div>
</div>
</div>
<div class="container">
<router-view/>
</div>
</template>
<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
function doLogout() {
localStorage.clear()
router.push({name: "login"})
}
</script>
<style scoped>
.pg-header {
height: 48px;
background-color: cornflowerblue;
line-height: 48px;
}
.container {
width: 980px;
margin: 0 auto;
}
.pg-header a {
display: inline-block;
padding: 0 10px;
cursor: pointer;
}
</style>
pinia组件
安装
npm install pinia
手动配置
或
npm create vue@latest
状态管理组件
- state，状态值
- getter，计算属性
- action，定义函数
案例：用户登录+保存用户信息+用户状态
src连接:链接：https:///s/1C-k3fUUw1SYLh4l4WfAGIg?pwd=vuef
提取码：vuef
案例实现
基于localStorge
这里遇到了意外报错
cookie组件
npm install vue3-cookies
main.js
import VueCookies from "vue3-cookies";
app.use(VueCookies)
其他地方：
import {useCookies} from "vue3-cookies";
const {cookies} = useCookies()
cookies.set("key","value", 30)
cookies.get("key")
cookies.remove("key")
#官方文档
https:///KanHarI/vue3-cookies
注意事项：
cookies.set("v1",JSON.stringify({id:1,name:"wupeiqi"}), 300)
cookies.get("v1")
axios
function doLogin() {
// 1.获取数据
console.log(username.value, password.value)
// 2.发送网络请求
_axios.get("/api/v1/course/category/free/?courseType=free").then((res) => {
console.log(res.data);
})
// 3.本地存储用户信息（登录凭证）
// localStorage.setItem("name", username.value)
let info = {id: 1, name: username.value, token: "xxx88sdkweisdfsd"}
store.doLogin(info)
// 4.跳转到首页
router.push({name: "mine"})
}综合案例
商城vip管理系统(增删改查)
创建项目
- vue
- drf
drf项目初始化动作
POST
{"username":"admin","password":123}
...
vue项目的初始化
登录是基于axios发送请求测试
现象：vue前端向后端API发送请求时有问题
login:1 Access to XMLHttpRequest at
请求跨域问题
1.浏览器中有同源策略，当发送ajax请求：请求的地址与当前所在网址保持一致，如果不一致，浏览器就会组织请求。
2.为什么 postman/requests 不报错？
3.在网站用cdn地址？
<script src="...."></script>
<img src="....."/>
4.项目开发时，经常会用到跨域
-> 前端页面
-> 后端接口
5.解决方式
- jsonp，发送ajax浏览器阻止；所以不在使用ajax发送请求，而是构造script标签+src发送请求获取结果。
- cors，添加响应头，让浏览器别再限制。drf
代码：
测试
现象：vue前端向后端API发送请求时有问题
login:1 Access to XMLHttpRequest at
请求跨域问题
1.浏览器中有同源策略，当发送ajax请求：请求的地址与当前所在网址保持一致，如果不一致，浏览器就会组织请求。
2.为什么 postman/requests 不报错？
3.在网站用cdn地址？
<script src="...."></script>
<img src="....."/>
4.项目开发时，经常会用到跨域
-> 前端页面
-> 后端接口
5.解决方式
- jsonp，发送ajax浏览器阻止；所以不在使用ajax发送请求，而是构造script标签+src发送请求获取结果。
- cors，添加响应头，让浏览器别再限制。
6.我们的API如果实现CORS？中间件
Access-Control-Allow-Origin:"*"
Access-Control-Allow-Headers:"*"添加请求头
from django.utils.deprecation import MiddlewareMixin
class CorsMiddleware(MiddlewareMixin):
def process_response(self, request, response):
response['Access-Control-Allow-Origin'] = "*"
response['Access-Control-Allow-Headers'] = "*"
response['Access-Control-Allow-Methods'] = "*"
return response
登录功能
填入往数据库插入的数据
会员列表
完整代码
查询
删除功能
新建
编辑
