正在构建该项目ing...此博文暂时记录重要的过程

一、设想:

构建一个个人中心web端应用,需要登录之后享有应用使用权,设想应用有:通讯录、天气预报等等。由于采用类似于微服务的形式,可维护性高。

二、技术栈:

  1. 服务端:node.js、express
  2. 前端:vue.js
  3. 数据库:MongoDB

三、开始:

项目总结——个人应用广场

在preapp下:express server

在server下:cnpm install、npm start

浏览器打开 : http://localhost:3000/

另外开一个命令行在preapp下:vue init webpack vueclient

在vueclient下:cnpm install、npm run dev

浏览器打开 : http://localhost:8080/


在vueclient下:cnpm install axios --save

停止Node端服务,安装mongodb

cnpm install [email protected] --save

安装 express-session

cnpm install express-session --save

四、项目分析

项目总结——个人应用广场

vueclient是前端代码,server是服务端代码

vueclient默认进入index.html页面

项目总结——个人应用广场

mian.js【公共js代码】将app与组件App绑定在一起

项目总结——个人应用广场

App.vue中直接输出组件,并使用路由

项目总结——个人应用广场

接着我们看路由文件:将打开网站直接调用Login组件

项目总结——个人应用广场

在login组件里,点击按钮,像在main.js中配置好的axios请求路径(调到server的routes),当成功后使用$router.push改变前端路径,调到网站首页

项目总结——个人应用广场

当点击面包屑导航想请求addressList时

项目总结——个人应用广场

则通过路由index.js跳转到addressList组件,在该组件渲染完成之后请求页面

项目总结——个人应用广场

即跳转到服务端的路由对数据库封装文件进行数据库操作

项目总结——个人应用广场

其余情况也大致如此....














相关文章: