6-1什么是spa
一种web应用程序或者网站
速度快，第一次下载完成静态页面，
6-2添加路由页面的基础结构
6-5vue-router配置路由
import { createRouter, createWebHistory } from 'vue-router'
import axios from 'axios'
import Home from './views/Home.vue'
import Login from './views/Login.vue'
import Signup from './views/Signup.vue'
import ColumnDetail from './views/ColumnDetail.vue'
import CreatePost from './views/CreatePost.vue'
import PostDetail from './views/PostDetail.vue'
import store from './store'
const routerHistory = createWebHistory()
const router = createRouter({
history: routerHistory,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/login',
name: 'login',
component: Login,
meta: { redirectAlreadyLogin: true }
},
{
path: '/signup',
name: 'signup',
component: Signup,
meta: { redirectAlreadyLogin: true }
},
{
path: '/create',
name: 'create',
component: CreatePost,
meta: { requiredLogin: true }
},
{
path: '/column/:id',
name: 'column',
component: ColumnDetail
},
{
path: '/posts/:id',
name: 'post',
component: PostDetail
}
]
})
router.beforeEach((to, from, next) => {
const { user, token } = store.state
const { requiredLogin, redirectAlreadyLogin } = to.meta
if (!user.isLogin) {
if (token) {
axios.defaults.headers.common.Authorization = `Bearer ${token}`
store.dispatch('fetchCurrentUser').then(() => {
if (redirectAlreadyLogin) {
next('/')
} else {
next()
}
}).catch(e => {
console.error(e)
store.commit('logout')
next('login')
})
} else {
if (requiredLogin) {
next('login')
} else {
next()
}
}
} else {
if (redirectAlreadyLogin) {
next('/')
} else {
next()
}
}
})
export default router
6-6vuerouter添加路由
<template>
<div class="column-detail-page w-75 mx-auto">
<div class="column-info row mb-4 border-bottom pb-4 align-items-center" v-if="column">
<div class="col-3 text-center">
<img :src="column.avatar && column.avatar.fitUrl" :alt="column.title" class="rounded-circle border w-100">
</div>
<div class="col-9">
<h4>{{column.title}}</h4>
<p class="text-muted">{{column.description}}</p>
</div>
</div>
<post-list :list="list"></post-list>
</div>
</template>
<script lang="ts">
import { defineComponent, computed, onMounted, watch, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { GlobalDataProps, ColumnProps } from '../store'
import PostList from '../components/PostList.vue'
import { addColumnAvatar } from '../helper'
export default defineComponent({
components: {
PostList
},
setup() {
const route = useRoute()
const store = useStore<GlobalDataProps>()
// 为了让 computed 响应对应的变化，添加响应式对象
const currentId = ref(route.params.id)
onMounted(() => {
store.dispatch('fetchColumn', currentId.value)
store.dispatch('fetchPosts', currentId.value)
})
// 检测变化
watch(() => route.params, (toParams) => {
// 确保要变化的路径是进入到用户的专栏
// 判断 跳转的 ID 是否存在
const jumpId = toParams && toParams.id
const column = store.state.user.column
if (jumpId && column && (jumpId === column)) {
// 重新发送请求，在 store 中有对应的缓存设置
store.dispatch('fetchColumn', jumpId)
store.dispatch('fetchPosts', { cid: jumpId })
// 重新赋值，这样 computed 会变化
currentId.value = toParams.id
}
})
const column = computed(() => {
const selectColumn = store.getters.getColumnById(currentId.value) as ColumnProps | undefined
if (selectColumn) {
addColumnAvatar(selectColumn, 100, 100)
}
return selectColumn
})
const list = computed(() => store.getters.getPostsByCid(currentId.value))
return {
column,
list
}
}
})
</script>
6-7添加columnDetail页面
export interface ColumnProps {
id: number;
title: string;
avatar?: string;
description: string;
}
export interface PostProps {
id: number;
title: string;
content: string;
image?: string;
createdAt: string;
columnId: number;
}
export const testData: ColumnProps[] = [
{
id: 1,
title: 'test1的专栏',
description: '这是的test1专栏，有一段非常有意思的简介，可以更新一下欧, 这是的test1专栏，有一段非常有意思的简介，可以更新一下欧',
avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_150,w_150'
},
{
id: 2,
title: 'test2的专栏',
description: '这是的test2专栏，有一段非常有意思的简介，可以更新一下欧',
avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100'
},
{
id: 3,
title: 'test3的专栏',
description: '这是的test1专栏，有一段非常有意思的简介，可以更新一下欧 这是的test1专栏，有一段非常有意思的简介，可以更新一下欧'
// avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100'
},
{
id: 4,
title: 'test4的专栏',
description: '这是的test2专栏，有一段非常有意思的简介，可以更新一下欧',
avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100'
}
]
export const testPosts: PostProps[] = [
{
id: 1,
title: '这是我的第一篇文章',
content: '"this is a new post you Very often we will need to map routes with the given pattern to the same component. For example we may have a User component which should be rendered for all users but with dif..."',
image: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee1980819f4ae08ac78d458.png?x-oss-process=image/resize,m_fill,m_pad,w_200,h_110',
createdAt: '2020-06-11 10:34:22',
columnId: 1
},
{
id: 2,
title: '这是我的第二篇文章',
content: '"this is a new post you Very often we will need to map routes with the given pattern to the same component. For example we may have a User component which should be rendered for all users but with dif..."',
createdAt: '2020-06-11 10:34:22',
columnId: 1
},
{
id: 3,
title: '这是我的第三篇文章',
content: '"this is a new post you Very often we will need to map routes with the given pattern to the same component. For example we may have a User component which should be rendered for all users but with dif..."',
image: 'https://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5edcc2329f2b4e28352b75eb.jpg?x-oss-process=image/resize,m_fill,m_pad,w_200,h_110',
createdAt: '2020-06-11 10:34:22',
columnId: 1
}
]
ColumnDetail.vue
<template>
<div class="column-detail-page w-75 mx-auto">
<div class="column-info row mb-4 border-bottom pb-4 align-items-center" v-if="column">
<div class="col-3 text-center">
<img :src="column.avatar && column.avatar.fitUrl" :alt="column.title" class="rounded-circle border w-100">
</div>
<div class="col-9">
<h4>{{column.title}}</h4>
<p class="text-muted">{{column.description}}</p>
</div>
</div>
<post-list :list="list"></post-list>
</div>
</template>
<script lang="ts">
import { defineComponent, computed, onMounted, watch, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { GlobalDataProps, ColumnProps } from '../store'
import PostList from '../components/PostList.vue'
import { addColumnAvatar } from '../helper'
export default defineComponent({
components: {
PostList
},
setup() {
const route = useRoute()
const store = useStore<GlobalDataProps>()
// 为了让 computed 响应对应的变化，添加响应式对象
const currentId = ref(route.params.id)
onMounted(() => {
store.dispatch('fetchColumn', currentId.value)
store.dispatch('fetchPosts', currentId.value)
})
// 检测变化
watch(() => route.params, (toParams) => {
// 确保要变化的路径是进入到用户的专栏
// 判断 跳转的 ID 是否存在
const jumpId = toParams && toParams.id
const column = store.state.user.column
if (jumpId && column && (jumpId === column)) {
// 重新发送请求，在 store 中有对应的缓存设置
store.dispatch('fetchColumn', jumpId)
store.dispatch('fetchPosts', { cid: jumpId })
// 重新赋值，这样 computed 会变化
currentId.value = toParams.id
}
})
const column = computed(() => {
const selectColumn = store.getters.getColumnById(currentId.value) as ColumnProps | undefined
if (selectColumn) {
addColumnAvatar(selectColumn, 100, 100)
}
return selectColumn
})
const list = computed(() => store.getters.getPostsByCid(currentId.value))
return {
column,
list
}
}
})
</script>
全局对象的弊端
数据不是响应式的
数据修改无法追踪
不符合组件化开发原则
状态管理工具的基本原则
一个类似于object的全局数据结构称之为store
只能调用一些特殊的方法来实现数据修改
vuex的核心是store,store包含应用当中大多数的状态state
状体存储时响应式的，不能直接改变store当中的状态，显示的提交mutaion
store.ts
import { createStore, Commit } from 'vuex'
import axios, { AxiosRequestConfig } from 'axios'
import { arrToObj, objToArr } from './helper'
export interface ResponseType<P = Record<string, never>> {
code: number;
msg: string;
data: P;
}
export interface ImageProps {
_id?: string;
url?: string;
createdAt?: string;
fitUrl?: string;
}
export interface UserProps {
isLogin: boolean;
nickName?: string;
_id?: string;
column?: string;
email?: string;
avatar?: ImageProps;
description?: string;
}
export interface ColumnProps {
_id: string;
title: string;
avatar?: ImageProps;
description: string;
}
export interface PostProps {
_id?: string;
title: string;
excerpt?: string;
content?: string;
image?: ImageProps | string;
createdAt?: string;
column: string;
author?: string | UserProps;
isHTML?: boolean;
}
interface ListProps<P> {
[id: string]: P;
}
export interface GlobalErrorProps {
status: boolean;
message?: string;
}
export interface GlobalDataProps {
token: string;
error: GlobalErrorProps;
loading: boolean;
columns: { data: ListProps<ColumnProps>; currentPage: number; total: number };
posts: { data: ListProps<PostProps>; loadedColumns: string[] };
user: UserProps;
}
const asyncAndCommit = async(url: string, mutationName: string,
commit: Commit, config: AxiosRequestConfig = { method: 'get' }, extraData?: any) => {
const { data } = await axios(url, config)
if (extraData) {
commit(mutationName, { data, extraData })
} else {
commit(mutationName, data)
}
return data
}
const store = createStore<GlobalDataProps>({
state: {
token: localStorage.getItem('token') || '',
error: { status: false },
loading: false,
columns: { data: {}, currentPage: 0, total: 0 },
posts: { data: {}, loadedColumns: [] },
user: { isLogin: false }
},
mutations: {
// login(state) {
// state.user = { ...state.user, isLogin: true, name: 'viking' }
// },
createPost(state, newPost) {
state.posts.data[newPost._id] = newPost
},
fetchColumns(state, rawData) {
const { data } = state.columns
const { list, count, currentPage } = rawData.data
state.columns = {
data: { ...data, ...arrToObj(list) },
total: count,
currentPage: currentPage * 1
}
},
fetchColumn(state, rawData) {
state.columns.data[rawData.data._id] = rawData.data
},
fetchPosts(state, { data: rawData, extraData: columnId }) {
state.posts.data = { ...state.posts.data, ...arrToObj(rawData.data.list) }
state.posts.loadedColumns.push(columnId)
},
fetchPost(state, rawData) {
state.posts.data[rawData.data._id] = rawData.data
},
deletePost(state, { data }) {
delete state.posts.data[data._id]
},
updatePost(state, { data }) {
state.posts.data[data._id] = data
},
setLoading(state, status) {
state.loading = status
},
setError(state, e: GlobalErrorProps) {
state.error = e
},
fetchCurrentUser(state, rawData) {
state.user = { isLogin: true, ...rawData.data }
},
login(state, rawData) {
const { token } = rawData.data
state.token = token
localStorage.setItem('token', token)
axios.defaults.headers.common.Authorization = `Bearer ${token}`
},
logout(state) {
state.token = ''
state.user = { isLogin: false }
localStorage.removeItem('token')
delete axios.defaults.headers.common.Authorization
}
},
actions: {
fetchColumns({ state, commit }, params = {}) {
const { currentPage = 1, pageSize = 6 } = params
// if (!state.columns.isLoaded) {
// return asyncAndCommit('/columns', 'fetchColumns', commit)
// }
if (state.columns.currentPage < currentPage) {
return asyncAndCommit(`/columns?currentPage=${currentPage}&pageSize=${pageSize}`, 'fetchColumns', commit)
}
},
fetchColumn({ state, commit }, cid) {
if (!state.columns.data[cid]) {
return asyncAndCommit(`/columns/${cid}`, 'fetchColumn', commit)
}
},
fetchPosts({ state, commit }, cid) {
if (!state.posts.loadedColumns.includes(cid)) {
return asyncAndCommit(`/columns/${cid}/posts`, 'fetchPosts', commit, { method: 'get' }, cid)
}
},
fetchPost({ state, commit }, id) {
const currentPost = state.posts.data[id]
if (!currentPost || !currentPost.content) {
return asyncAndCommit(`/posts/${id}`, 'fetchPost', commit)
} else {
return Promise.resolve({ data: currentPost })
}
},
updatePost({ commit }, { id, payload }) {
return asyncAndCommit(`/posts/${id}`, 'updatePost', commit, {
method: 'patch',
data: payload
})
},
fetchCurrentUser({ commit }) {
return asyncAndCommit('/user/current', 'fetchCurrentUser', commit)
},
login({ commit }, payload) {
return asyncAndCommit('/user/login', 'login', commit, { method: 'post', data: payload })
},
createPost({ commit }, payload) {
return asyncAndCommit('/posts', 'createPost', commit, { method: 'post', data: payload })
},
deletePost({ commit }, id) {
return asyncAndCommit(`/posts/${id}`, 'deletePost', commit, { method: 'delete' })
},
loginAndFetch({ dispatch }, loginData) {
return dispatch('login', loginData).then(() => {
return dispatch('fetchCurrentUser')
})
}
},
getters: {
getColumns: (state) => {
return objToArr(state.columns.data)
},
getColumnById: (state) => (id: string) => {
return state.columns.data[id]
},
getPostsByCid: (state) => (cid: string) => {
return objToArr(state.posts.data).filter(post => post.column === cid)
},
getCurrentPost: (state) => (id: string) => {
return state.posts.data[id]
}
}
})
export default store
{User,用户信息
ColumnProps[],专栏列表
PostProps[],文章列表}
interface UserProps{
isLogin:boolean,
name?:string,
id?:number;}
import{}from'vuex'
const store=createStore({
state:{
columns:testData,
posts:tetsPosts,
user:{isLogin:false}}})
export default store
main.ts
使用store
app.use(store)
setup(){
return {
currentUser}
const store=useStare()
const list=computed(()=>store.state.columns);
return{list:testData}}
export default defineComponent({
name:‘App'
const onFormSubmit=(result:boolean)=>{
if(result){
6-12使用vuexgetters
从store当中的state当中派生一些状态
const biggerColumnLen=computed(()=>store.cloumns.filter(c=>c.id>2)
getters:{
biggerColumnsLen(state){
return state.columnes.filter(c=>c.id>2).length},
getCloumnById:(state)=>id.number
6-13-添加新建文章的页面
createpost.vue
<template>
<div class="create-post-page">
<h4>{{isEditMode ? '编辑文章' : '新建文章'}}</h4>
<uploader
action="/upload"
:beforeUpload="uploadCheck"
@file-uploaded="handleFileUploaded"
:uploaded="uploadedData"
class="d-flex align-items-center justify-content-center bg-light text-secondary w-100 my-4"
>
<h2>点击上传头图</h2>
<template #loading>
<div class="d-flex">
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<h2>正在上传</h2>
</div>
</template>
<template #uploaded="dataProps">
<div class="uploaded-area">
<img :src="dataProps.uploadedData && dataProps.uploadedData.data.url">
<h3>点击重新上传</h3>
</div>
</template>
</uploader>
<validate-form @form-submit="onFormSubmit">
<div class="mb-3">
<label class="form-label">文章标题：</label>
<validate-input
:rules="titleRules" v-model="titleVal"
placeholder="请输入文章标题"
type="text"
/>
</div>
<div class="mb-3">
<label class="form-label">文章详情：</label>
<editor
v-model="contentVal"
:options="editorOptions"
@blur="checkEditor"
:class="{'is-invalid': !editorStatus.isValid}"
>
</editor>
<span v-if="!editorStatus.isValid" class="invalid-feedback mt-1">{{editorStatus.message}}</span>
</div>
<template #submit>
<button class="btn btn-primary btn-large">{{isEditMode ? '更新文章' : '发表文章'}}
</button>
</template>
</validate-form>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { Options } from 'easymde'
import { GlobalDataProps, PostProps, ResponseType, ImageProps } from '../store'
import ValidateInput, { RulesProp } from '../components/ValidateInput.vue'
import ValidateForm from '../components/ValidateForm.vue'
import Uploader from '../components/Uploader.vue'
import Editor from '../components/Editor.vue'
import createMessage from '../components/createMessage'
import { beforeUploadCheck } from '../helper'
export default defineComponent({
name: 'CreatePost',
components: {
ValidateInput,
ValidateForm,
Uploader,
Editor
},
setup() {
const uploadedData = ref()
const titleVal = ref('')
const editorStatus = reactive({
isValid: true,
message: ''
})
const router = useRouter()
const route = useRoute()
const isEditMode = !!route.query.id
const store = useStore<GlobalDataProps>()
const textArea = ref<null | HTMLTextAreaElement>(null)
let imageId = ''
const editorOptions: Options = {
spellChecker: false
}
const titleRules: RulesProp = [
{ type: 'required', message: '文章标题不能为空' }
]
const contentVal = ref('')
const contentRules: RulesProp = [
{ type: 'required', message: '文章详情不能为空' }
]
const checkEditor = () => {
if (contentVal.value.trim() === '') {
editorStatus.isValid = false
editorStatus.message = '文章详情不能为空'
} else {
editorStatus.isValid = true
editorStatus.message = ''
}
}
onMounted(() => {
if (isEditMode) {
store.dispatch('fetchPost', route.query.id).then((rawData: ResponseType<PostProps>) => {
const currentPost = rawData.data
if (currentPost.image) {
uploadedData.value = { data: currentPost.image }
}
titleVal.value = currentPost.title
contentVal.value = currentPost.content || ''
})
}
})
const handleFileUploaded = (rawData: ResponseType<ImageProps>) => {
if (rawData.data._id) {
imageId = rawData.data._id
}
}
const onFormSubmit = (result: boolean) => {
checkEditor()
if (result && editorStatus.isValid) {
const { column, _id } = store.state.user
if (column) {
const newPost: PostProps = {
title: titleVal.value,
content: contentVal.value,
column,
author: _id
}
if (imageId) {
newPost.image = imageId
}
const actionName = isEditMode ? 'updatePost' : 'createPost'
const sendData = isEditMode
? {
id: route.query.id,
payload: newPost
}
: newPost
store.dispatch(actionName, sendData).then(() => {
createMessage('发表成功，2秒后跳转到文章', 'success', 2000)
setTimeout(() => {
router.push({ name: 'column', params: { id: column } })
}, 2000)
})
}
}
}
const uploadCheck = (file: File) => {
const result = beforeUploadCheck(file, { format: ['image/jpeg', 'image/png'], size: 1 })
const { passed, error } = result
if (error === 'format') {
createMessage('上传图片只能是 JPG/PNG 格式!', 'error')
}
if (error === 'size') {
createMessage('上传图片大小不能超过 1Mb', 'error')
}
return passed
}
return {
titleRules,
titleVal,
contentVal,
contentRules,
onFormSubmit,
uploadCheck,
handleFileUploaded,
isEditMode,
uploadedData,
textArea,
editorOptions,
checkEditor,
editorStatus
}
}
})
</script>
<style>
.create-post-page .file-upload-container {
height: 200px;
cursor: pointer;
overflow: hidden;
}
.create-post-page .file-upload-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.uploaded-area {
position: relative;
}
.uploaded-area:hover h3 {
display: block;
}
.uploaded-area h3 {
display: none;
position: absolute;
color: #999;
text-align: center;
width: 100%;
top: 50%;
}
</style>
export type TagType ='input'|'textarea'
tag:{type:String as PropType,
default:''}
mutation(
createPost(state,newPost){
state.post.pupsh(
const onFormSubmit=(result:boolean）=》{
if（result)[
const{columnId}=store.state.user
if(columnId){
const newPost:PostProps={
id:new Date().geTtime()
title:title.value
6-14-vuerouter添加路由守卫，前置守卫
router.beforeEach((to, from, next) => {
const { user, token } = store.state
const { requiredLogin, redirectAlreadyLogin } = to.meta
if (!user.isLogin) {
if (token) {
axios.defaults.headers.common.Authorization = `Bearer ${token}`
store.dispatch('fetchCurrentUser').then(() => {
if (redirectAlreadyLogin) {
next('/')
} else {
next()
}
}).catch(e => {
console.error(e)
store.commit('logout')
next('login')
})
} else {
if (requiredLogin) {
next('login')
} else {
next()
}
}
} else {
if (redirectAlreadyLogin) {
next('/')
} else {
next()
}
}
})
router.beforeEach((to,from,next(-{
if(to.name==='ligin'&&!tsorestate.user.isLogin){
next({name:'login'})}else{next()}
6-15使用元信息完成权限管理
meta字段，
