需求分析前后端接口約定創(chuàng)建遠(yuǎn)程倉庫vue-cli初始化項目結(jié)構(gòu)初始化樣式引入圖標(biāo)安裝less配置路由組件拆分劃分模塊,編寫靜態(tài)頁面引入axios,封裝接口apimock數(shù)據(jù)氓癌，測試接口api再次分析交互的實現(xiàn)細(xì)節(jié)交互實現(xiàn)打包上線
交互分析
- 當(dāng)用戶訪問任意頁面舌稀，假如用戶未登錄，跳轉(zhuǎn)到登錄頁面
- 用戶此時可輸入賬號密碼進(jìn)行登錄，也可點擊注冊賬號顯示【注冊頁面】
- 在注冊頁面用戶可輸入賬號密碼進(jìn)行登錄
- 登錄成功后尚困，跳轉(zhuǎn)到【筆記本列表】頁面，用戶可以添加贝奇，刪除芝此、修改筆記本
- 用戶點擊某條筆記本，會跳轉(zhuǎn)到【筆記頁面】寿酌，【筆記】頁面展示【當(dāng)前筆記本下】的筆記列表胰苏，【筆記詳情組件】展示筆記列表下的第一條筆記詳情；如果筆記列表為空醇疼，【詳情組件】提示請新建硕并。
- 用戶可切換筆記本，當(dāng)切換后秧荆，【詳情組件】默認(rèn)展示第一條筆記
2.前后端接口約定
3.新建git倉庫
4. Vue-cli建立項目結(jié)構(gòu)
vue init webpack Vue-cloudnotes
5.項目代碼初始化
1.在src/assets/styles目錄下添加reset.css文件
2.在main.js里面引入reset.css
項目代碼初始化.png
在main.js引入reset.png
6. 引入圖標(biāo)倔毙，初始化body
@import '//at.alicdn.com/t/font_496303_kqrjhri8l25d0a4i.css';
* {
box-sizing: border-box;
}
html, body, #app {
height: 100%;
}
body {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #eee;
}
7.配置路由
在router-index.js里面配置路由
export default new Router({
routes: [
{
path: '/',
component: Login
}, {
path: '/login',
name: 'Login',
component: Login
}, {
path: '/notebooks',
name: 'Notebooks',
component: Notebooks
}, {
path: '/notes',
name: 'Notes',
component: Notes
}, {
path: '/trash',
name: 'Trash',
component: Trash
}
]
})
組件拆分及注入
組件拆分.png
引入avatar組件1.png
引入avatar組件.png
使用avatar3.png
書寫靜態(tài)頁面
使用?傳參，再次配置路由
交互實現(xiàn)
在MVVM中乙濒，交互實現(xiàn)主要就是對數(shù)據(jù)的操作陕赃，我們對各部分需要用的的數(shù)據(jù)進(jìn)行分析卵蛉。
側(cè)邊欄
data:{username,slug}
用戶頭像
data:{slug}
sulg隨著用戶的改變而改變，初次進(jìn)入為未登錄么库，登錄或注冊后傻丝，用戶發(fā)生改變；【slug】也要進(jìn)行改變诉儒；
筆記本列表頁
data:{notebooks}
每個用戶狀態(tài)下只有一個notebooks葡缰，隨著用戶改變而改變；
筆記頁
data:{notebooks,curnotebook,notes,curnote}
notebooks通過getter獲取忱反，
curnotebook可以在筆記本列表點擊導(dǎo)航改變泛释；也可以在筆記側(cè)邊欄改變，依賴curbookId;
當(dāng)用戶改變notebook缭受，notes隨之改變
curnote,當(dāng)用戶在側(cè)邊欄點擊可改變胁澳，未點擊狀態(tài)下為當(dāng)前所有筆記中的第一個；點擊后傳入【curNoteId】改變米者；
使用Vuex管理數(shù)據(jù)
1.安裝vuex
npm i vue-x --save
2.在src目錄下新建store文件夾
vuex項目結(jié)構(gòu).png
3.在index中韭畸，引入相關(guān)模塊
import Vue from 'vue'
import Vuex from 'vuex'
import note from './modules/notebook'
import notebook from './modules/note'
import user from './modules/user'
import trash from './modules/trash'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
notebook,
note,
user,
trash
}
})
4.在main.js中引入并使用Store;
import store from ''./store"
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
user.js
const state = {
user:null
}
const getters = {
sulg: state=>state.user?state.user.username.charAt(0):'未'
}
const mutations = {
setUser(state,payload){
state.user = payload
}
}
const actions = {
checkoutLogin({commit}){
return Auth.getInfo().then(res=>{
if(res.isLogin){
commit('setUser',res.data)
route.push('/notebooks')
}else{
route.push('/login')
}
})
},
// 當(dāng)login時改變user
loginUser({commit},{username,password}) {
return Auth.login({username,password}).then(res=>{
commit('setUser',res.data);
route.push('/notebooks')
})
},
registerUser({commit},{username,password}) {
return Auth.login({username,password}).then(res=>{
commit('setUser',res.data);
route.push('/notebooks')
})
}
}
export default {
state,
getters,
mutations,
actions
}
notebooks
import Notebook from '@/apis/notebooks'
import {Message} from 'element-ui'
const state = {
notebooks: [],
curBookId: null,
}
const getters = {
notebooks: state=>state.notebooks,
curBook: state=> {
if(!state.curBookId) return state.notebooks[0] || {};
return state.notebooks.find(notebook=>notebook.id==state.curBookId);
}
}
const mutations = {
setNotebooks(state,{notebooks}){
state.notebooks = notebooks
},
addNotebook(state,{notebook}){
state.notebooks.unshift(notebook)
},
deleteNotebook(state,{notebookId}){
state.notebooks = state.notebooks.filter(notebook=>notebook.id !==notebookId)
},
updateNotebook(state,{notebookId,title}){
// 淺拷貝
let notebook = state.notebooks.find(notebook=>notebook.id===notebookId);
notebook.title = title;
},
setCurBookId(state,{notebookId}) {
console.log(notebookId)
state.curBookId = notebookId
}
}
const actions = {
getNotebooks({commit}){
return Notebook.getAll().then(res=>{
commit('setNotebooks',{notebooks:res.data});
})
},
addNotebook({commit},{title}){
return Notebook.addNotebook({title}).then(res=>{
commit('addNotebook',{notebook:res.data})
})
},
deleteNotebook({commit},{notebookId}){
return Notebook.deleteNotebook(notebookId).then(res=>{
commit('deleteNotebook',{notebookId})
Message.success(res.msg)
}).catch(res=>{
Message.warning(res.msg)
})
},
updateNotebook({commit},{notebookId,title}){
return Notebook.updateNotebook(notebookId,{title}).then(res=>{
commit('updateNotebook',{notebookId,title})
})
}
}
export default {
state,
getters,
mutations,
actions
}
notes
import Note from '@/apis/notes'
import {Message} from 'element-ui'
window.Note = Note;
const state = {
notes: null,
curNoteId:null
}
const getters = {
notes: state=>state.notes || [],
curNote: state=> {
if(!Array.isArray(state.notes)) return {};
// 假如沒有傳遞參數(shù)，就獲取第一個筆記
if(!state.curNoteId) return state.notes[0] || {};
return state.notes.find(note=>note.id==state.curNoteId) || {};
}
}
const mutations = {
setNotes(state,{notes}){
state.notes = notes
},
setCurNoteId(state, { curnoteId }) {
state.curNoteId = curnoteId;
},
addNotes(state,{note}){
note.friendlyTime = '剛剛',
note.updateFriendlyTime = '剛剛'
state.notes.unshift(note)
},
deleteNote(state,{noteId}){
state.notes = state.notes.filter(note=>note.id !==noteId) || {}
},
updateNote(state,{noteId,title,content}){
// 淺拷貝
let note = state.notes.find(note=>note.id===noteId);
note.title = title;
note.content = content;
},
}
const actions = {
getNotes({commit},{notebookId}){
return Note.getAll({notebookId}).then(res=>{
commit('setNotes',{notes:res.data});
})
},
addNote({commit},{notebookId,title,content}){
return new Promise((resolve,reject)=>{
Note.addNote({notebookId},{title,content}).then(res=>{
commit('addNotes',{note:res.data})
Message.success('請在此處添加筆記內(nèi)容')
resolve(res.data)
})
})
},
deleteNote({commit},{noteId}){
return Note.deleteNote({noteId}).then(res=>{
commit('deleteNote',{noteId})
Message.success(res.msg)
}).catch(res=>{
Message.warning(res.msg)
})
},
updateNote({commit},{noteId,title,content}){
return Note.updateNote({noteId,title,content}).then(res=>{
commit('updateNote',{noteId,title,value})
}).catch(()=>{})
}
}
export default {
state,
getters,
mutations,
actions
}
trash
xxx
具體交互
