vue+express开发,利用axios交互。总结

Vue

响应式数据绑定和组件化开发（单页应用）
Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。响应式实现页面数据和代码数据的自动同步更新，使开发可以简化为操作业务数据，跟视图层分离
组件化开发将页面不同功能的模块独立开发，使开发更加条理清晰和独立

vue-cli 是 运行在 NodeJS 环境下 帮助我们开发 基于Vue框架的项目 的脚手架。

创建的项目目录结构：

├── node_modules// 项目依赖的模块、
├── src// 源码目录
│ ├── assets// 资源目录
│ ├── components// vue公共组件
│ ├──router// 前端路由
│ │ └── index.js// 路由配置文件
│ ├── App.vue// 页面入口文件（根组件）
│ └── main.js// 程序入口文件（入口js文件）
└── public// 静态文件，比如一些图片，json数据等
│ └── index.html// 入口页面
├── .editorconfig// 定义代码格式
├── .gitignore// git上传需要忽略的文件格式
├── .babel.config.js
├── package.json// 项目基本信息
├── README.md// 项目说明

组件代码结构

Express

基于Node 灵活，轻量。利用其配置前端所需服务器，从而实现Web请求处理的功能非常便捷。
而且因为对前端JavaScript较为熟悉，所以学习使用Express容易上手。

express路由
路由（Routing）是由一个 URI（或者叫路径）和一个特定的 HTTP 方法（GET、POST 等）组成的，涉及到应用如何响应客户端对某个网站节点的访问。每一个路由都可以有一个或者多个处理器函数，当匹配到路由时，这个/些函数将被执行。
通过 Express 应用生成工具（express-generator）可以快速创建一个Express
应用的基础框架

生成的Express应用 的目录结构：

• bin：真实的执行程序
• db: 连接数据库
• node_module：存放项目所需要的依赖模块
• public：存放静态文件
• routes：路由文件
• views：页面模板文件
• app.js：程序启动文件
• package.json：项目依赖配置及开发者信息，运行npm install

后端开发步骤：

• 功能分析及路由规划
• 安装所需依赖
• 连接数据库
• 针对前端请求编写后端接口，操作数据库，返回相应数据

后端对前端的请求进行响应，拉取数据库内容，返回JSON数据，前端利用预先写的html模板，循环读取JSON数据，并插入页面

//主要代码基本编写结构
const express = require('express');//引入nodejs  express框架
const router = express.Router();

const conn = require('./../db/db')//连接数据库

//例：处理post请求  
//修改用户信息
router.post('/uppassword',(req,res) => {
    //...判断处理的逻辑代码
    //数据库操作语句
  const sqlStr = 'UPDATE userdata SET ? WHERE username = ?';
  conn.query(sqlStr,[req.body.changedata,req.body.username], (error, results) => {
      if (error) {
          res.json({err_code: 0, message: '更新数据失败'});
      }else {
          res.json({suc_code: 200, message: '更新数据成功'});
      }
  });
});

node.js

javascript运行环境，使js代码可以运行于浏览器之外，也可编写服务器等功能
node.js 运用大量异步调用回调，即非同步执行代码，代码非顺序执行，node使用npm管理包，即依赖的各种功能均可直接使用npm安装

设计开发时，由于对前端掌握相较后端更为了解熟悉，系统构建编写偏向前端，逻辑处理和判断基本都在前端编写，后端基本只进行对应数据库操作。

Axios

在项目中，和后台交互获取数据使用的是axios。

项目的src目录中，新建了一个api文件夹，然后在里面新建一个http.js和一个index.js文件。http.js文件用来封装axios，index.js用来统一管理接口。

//http.js 例：
export async function httpPost(url, params) {
    var ret =await axios.post(url, params)
    return ret.data
}
//index.js 例：
//修改用户信息
export const upUserData = (params) => httpPost('/users/uppassword',params)

难点

开发难点：

1. 项目初始开发时，只懂前端页面制作，不了解后端，所以express、axios的学习用于前后端交互花费大量时间。

功能设计难点：

1. 登陆状态判断，用于用户权限开放
2. 购物车利用勾选功能进行批量删除和结算
3. 分页组件功能
4. 数据批量加入数据库时，数据格式的加工

对应解决办法：
5. 利用Session Storage,在用户登陆时，sessionStorage.setItem(“userName”, this.username);保存用户名数据到浏览器。通过router.beforeEach控制路由，判断sessionStorage.getItem(“userName”)是否存在来进行相应处理。
6. 在从数据库请求到数据后，为每一条数据添加属性 this.$set(item,‘select’,false)，select用于判断是否勾选。批量删除和结算时，遍历数组元素判断属性值来筛选。
3.将分页功能拆分，一步步添加。先做页号点击跳转，再加上一页和下一页，最后加输入跳转。并将逻辑操作计算的各固定数字尽量设置为变量，利于理解和编写。每一分步都添加console.log(),通过控制台输出，监控各步逻辑输出。
4. 多次模拟数据操作，判断所要求格式。最后将每条数据的key/value存为一维数组元素，一条数据就是一个一维数组，再将其组成二维数组，成功存入数据库。