你的位置:首页 > 网页设计

[网页设计]记小白的一次基于vue+express+mongodb个人站开发

  学了vue和node一段时间了,折腾了一些零零散散的小东西。马上大四了要出去找工作了,所以早就想搭一个个人站作为一次较为全面的总结。因为没有设计功底,界面设计使我这种强迫症患者苦不堪言。幸而到最后花了一个星期,慢慢磨还是做出来能看的。本文章也只是记录一下小白的学习记录,然后期待大佬进行指教。好了,开始正题吧。

  一:先放在线预览地址吧 >    github:https://github.com/guoaihua/main_project/tree/master/zming

    预览图:

        

                               

 

     二:技术栈:

    vue vue-router

    axios 

    express

    mongoose

  三.项目结构:

      前端项目结构: static中存放静态资源        apis后端项目结构

                        

  四:环境搭建

    .首先用安装vue-cli ,安装项目模版,进入项目安装依赖

    npm install -g vue-cli
    vue init webpack project-name
    cd project
    npm install
    npm run dev

  当你看到vue页面自动打开并显示他的图标时,页面算是搭建成功了

  五:开始编写前端项目

   1.在App.vue里建好页面结构,在头部建立好路由标签,这个在vue文档中有很详细的介绍,并将组件渲染到中间content中

 <div id="app"> 	<div > 		<div > 			<h1 >ZIming</h1> 			<ul> 				 				<li><router-link to='/contact'>联系我</router-link></li> 				<li><router-link to='/article'>个人介绍</router-link></li> 				<li><router-link to='/project'>项目展示</router-link></li> 				<li><router-link to='/person'>图片欣赏</router-link></li> 				<li><router-link to='/home'>主页</router-link></li> 			</ul> 		</div> 		<div > 			<router-view></router-view> 		</div> 		<div ></div> 		<span @click="stop"> 				<img src="http://www.cnblogs.com//static/imgs/music-fly.png" alt="" >				<audio :src="src" autoplay="autoplay" id="audio"></audio> 		</span> 	</div> </div>

  

   2.配置路由:这个项目模版已经创建好了(如果你在创建项目的时候点了vue-router yes的话),所以我们只需要配置

     src下的router下的index.js

import Vue from 'vue'import Router from 'vue-router'import home from '../components/home'import project from '../components/project'import article from '../components/article'import person from '../components/person'import contact from '../components/contact'Vue.use(Router)export default new Router({ routes: [ {  path: '/home',  name: 'home',  component: home }, {  path: '/person',  name: 'person',  component: person },  {  path: '/article',  name: 'article',  component: article },  {  path: '/project',  name: 'project',  component: project },  {  path: '/contact',  name: 'contact',  component: contact }, {  path:'/*',  redirect:'/home' } ]})

 

最后一个重定向网页到home,方便打开时显示

3.编写5个组件

  这里的也没什么特别的,可能有一个组件之间的通信问题,我自己的做的比较简单没在用到vuex。但是之前碰到过坑,所以了记录一下。

    1.父子组件通信

    子组件动态获取父组件数据

<input v-model="sendmessage"> 
<child :receive="sendmessage"></child>
{
  props:['receive']
}

      2.非父子组件通信

    为了利用vue的 $emit() 和 $on() 事件,得先创建一个Vue实例 

    var bus = new Vue() //通常情况下

 

    此项目中由于创建的实例没有名称,我们重新创建一个Bus实例,并将他注入到根组件App下,便于其它组件都能访问到

  main.js    

    new Vue({
    el: '#app',
      store,
    router,
    template: '<App/>',
    components: { App },
    data:{
    Bus:new Vue()
    }
    })

  然后发送 通过this.$root.Bus访问到根组件的实例,将它作为载体传送数据

  //发送 数据 
     this.$root.Bus.$emit('showing',this.b);
     //接受
     this.$root.Bus.$on('showing', (data)=>{ this.pic=data.pic; this.name=data.name; this.author=data.author; this.src=data.src; }
    

 

   至此大部分组件通信能搞定了,涉及到复杂的话,那就要使用vuex了,这里就不再谈了。

  4.axios 发送异步请求,获取数据

   1.先安装

 cnpm i axios -D

 

   在main.js中 import axios,然后悲催的发现在其它组件中无法使用,而它也不支持Vue.use().gg..。一顿疯狂百度之后发现了简单的解决方案:改写原型链,为Vue实例的原型添加axios属性 

 Vue.prototype.$axios = axios

   其他组件调用

  this.$axios({});

   2.好了,愉快的搞定了使用问题。然后在App.vue中发起了第一个ajax请求,这是请求自己写好的后台的一个api。

   this.$axios.post('http://www.guoaihua.com:3000/users/saveInfo',{    ip:returnCitySN.cip,    adress:returnCitySN.cname,    time:new Date()   }).then(function (res) {    console.log(res);   })

 

    很不幸返回了一串英文,禁止跨域访问。

    想到CROS,就跑到服务器上给服务端的express中加了一个头部

app.all('*',function (req,res,next) { res.header("Access-Control-Allow-Origin","*");   res.header("Access-Control-Allow-Headers","Content-Type"); next();});

     然而,事情往往并不是那么简单的就结束了。当我调用一个搜狐查询api时,同样返回了禁止跨域访问。我去。。开玩笑吧,我总不能去改它服务器吧。那。。那我就用webpack的proxy吧。在config下的index.js中找到了proxyTable

'/cityjson': {    target: 'http://pv.sohu.com',
        pathRewrite: {'^/cityjson' : '/cityjson'},
         changeOrigin: true }

 

    好,贼溜。故事的最后是上线的时候发现打包后部署到不行,它只适用与开发环境。崩溃了。。。。

    冷静一大下,想起来了跨域还有一个“”神奇的东西” script标签 ,我去这个好,非常愉快的在html.index加上了。

<script src="http://pv.sohu.com/cityjson"></script>

 

   5.这些东西搞完之后,页面也就差不多了,至于样式布局啥的就不写了。

  六.开始撸后端代码了

  1. 首先惯例,创建项目模版 

npm install express-generator -g // 这要管理员权限
express project // 创建项目
npm i
npm start //ok

 

   2.这个模版路由啥的已经写好了,进去配置就ok

    之前有一个音乐获取的api     这个001是可以变化的,对应不同的歌曲,所以这里使用了路由参数,这个:id及对应001,获取参数需要中间件bodyParser解析

router.use(bodyParser.urlencoded({extended: false}));router.use(bodyParser.json());

 

    然后在路由中,用req.param.id获取。这样就避免了写无数个。因为这个是要返回music的,所以用了sendFile();并通过path将当前目录映射到了musics

router.get('/:id', function(req, res, next) { res.sendFile(path.join(__dirname,'../musics',req.params.id+'.mp3'));});

 

  3.mongodb ,在express框架中用mongoose模块来控制mongodb

  Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力      Model : 由Schema发布生成的模型,具有抽象属性和行为的数据库操作对    Entity : 由Model创建的实体,他的操作也会影响数据库

   mongodb的安装就不说了。安装mongoose

 cnpm i mongoose -D

 

   编写配置文件 mongoose.js

var mongoose=require('mongoose');var db=mongoose.connect('mongodb://localhost/test');var DataSchema=new mongoose.Schema({ ip:{type:String}, adress:{type:String}, time:{type:Date,default:Date.now}});var MesSchema=new mongoose.Schema({ name:{type:String}, qq:{type:Number}, email:{type:String}, phone:{type:Number}, message:{type:String}, time:{type:Date,default:Date.now}});mongoose.model('usersInfo',DataSchema);mongoose.model('mesInfo',MesSchema);

 

   首先创建Schema collections  相当于mysql中的表

   然后用mongoose将Schema发布为model

  调用,先通过mongoose.model获取到发布的model,再利用这个model创建一个实例,最后save。

  var usersModel=mongoose.model('usersInfo');  var data=new usersModel({   ip:req.body.ip,   adress:req.body.adress,   time:req.body.time  });  data.save(function(err){   console.log(err);  });

 

 七.将项目部署到服务端

  首先打包前端项目

 npm run build

 

   然后将dist拷贝到了服务端新建的一个express项目中,并在它上面加上了,并npm start 开启

  app.use(express.static(path.join(__dirname, 'dist')));

 

   后端代码就不管了,不想改很多api接口,所以直接扔到服务端上。在开启这个之前要先打开服务端的mongodb,然后node ./bin/www

  好,至此一个完整的从前端界面设计到后端的数据库项目都搞定了,页面也非常越快的跑起来了。哈哈哈,然而,还有很多事情去做,性能优化,安全啥的.....

八.结语

  哈哈,写的有点乱七八糟的,以往都是看大神们的文章学习,今天激动了,小白自己动了一回手。没啥技术可言,就是将自己踩的一些坑记录了下来,方便以后回顾,如果能给其它小伙伴哪怕一点点帮助,我就很开心了0.0.最后项目在github上有发布,求顺手star一下(马上大四了,要找工作了想着能有点用)