vue+node+mysql實現類似新聞app的頁面實現

最近將vue+node+mysql整合了一下寫了一個簡單的案例。

前端使用vue全家桶+muit-ui實現的項目前端構建。

后端使用node的express模塊進行搭建。

數據庫使用mysql。

簡單記錄一下寫的過程。

首先使用vue-cli搭建一個webpack項目，在此只列出自己寫的一些文件或者有過改變的。其他的就不一一寫了。

ne-build

-config
    --index.js
-node_modules 
-server 　
    --api
        --Artical.js
        --chLocal.js
        --chModern.js
        --chSport.js
        --login.js
        --userApi.js
    --db.js
    --index.js
    --sqlMap.js　
-src 
    --assets
        --css
        --js
        --img
    --components
        --instrument
            --Date.js
            --index.js
        --Admin.vue
        --Artical.vue
        --entry.vue
        --home.vue
        --Local.vue
        --Modern.vue
        --Sport.vue
        --User.vue
    --router
        --index.js
    --store
        --index.js
    --App.vue
    --main.js
-static 
-test 
-index.html 
-package.hson 
-.babelrc 
-.editorconfig 
-.gittignore 
-.gitattributes


 

首先使用muit-ui搭建正常的模板文件。也就是src內部的components。

--Date.js    作為每次改變時間的函數

--index.js   與date.js同屬instrument文件夾內部，index.js就是總的外部引用文件

--Admin.vue   　添加文章模板

--Artical.vue   文章顯示界面

--entry.vue     登陸成功后網頁顯示

--home.vue      首頁顯示模板

--Local.vue     熱點新聞模板

--Modern.vue    新時代新聞模板

--Sport.vue     體育新聞模板 

--User.vue       登錄界面模板

 

使用vuex管理某些共有數據例如我們需要在顯示user界面的時候將home模板部分的下端切換進行隱藏。

使用vue-router達到路由轉換等目的。

使用axios來進行使用get或者post請求。

此處簡單填一下坑。

1.scrollBehavior: ()=>({x:0,y:0})  寫在router內部的index.js文件內部。作用是我們在使用router進行切換頁面的時候，當頁面在之前已經被拉到下面了。下一次加載就會轉換到頁面最上面。

2.Vue.prototype.$http = Axios; 寫在main.js文件中Axios不能像其他模塊一樣將寫在new vue內部，而是需要單獨掛載到vue原型上面。

3changeuser_entry:({commit},name)=>{

commit('changeuser_entry',name);
}   寫在store的index.js文件內部(實際上就是vuex的應用)。該方法就是actions映射mutations的一種方法。注意一下傳遞參數的方法。

4.

this.$http.post('/api/artical',{params:{id:this.$route.query.id,address:this.$route.params.column}}).then((response) => {
this.data = response.data[0];
}).catch((err) => {
console.log(err);
}) 寫在components內部的Artical.vue文件中，實際上的作用就是將請求發送到'/api/artical'地址上。后面{params....}等是想要傳遞到后台的參數。

5.<router-link tag="li" :to="{name:'artical',params:{column:'local'},query:{id:val.id}}" class="my_main" v-for="(val,key) in datas">

寫在Local.vue中，此處記錄的意義是對比4中的傳遞數據，此處實際上是在前端上進行轉換

------先暫時寫到這里，有時間繼續-------