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中的传递数据，此处实际上是在前端上进行转换

------先暂时写到这里，有时间继续-------