数据处理复杂数据 实际工作中经常会收到后端各种奇葩的数据格式，对应复杂的数据需要进行有效消息的提炼，就需要对JSON数据进行处理，比如如下格式 12345678910111213141516171819202122232425262728293031323334let jsonStr = { Code: 10000, Message: "成功", Time: "2018-11-01 11:09:08", Result: { rData: [ { count: 20, title: "V1", color: "#2dc6c8", }, { count: 15, title: "V2", color: "#b6a2dd", }, { coun ...

新增模块 点击新增按钮会弹出一个输入界面 实现思路 在index.jsp页面点击”按钮”，弹出新增对话框 去数据库查询部门列表，显示在对话框中 用户输入数据并进行校验完成保存 jQuery前端校验+Ajax用户名重复校验+重要数据配上后端校验和数据库唯一约束 Restful风格URI： /emp/{id} GET查询员工 /emp 发POST即保存员工 /emp/{id} PUT请求修改员工 /epm/{id} DELETE删除员工 模态框 弹出来的界面可以使用Boostrap提供的JavaScript插件模态框实现 修改index.jsp文件，新增模态框 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<!-- 员工添加的模态框 --><div class="modal fade" id="empAddModal&q ...

分页查询实现思路 首先访问index.jsp页面 index.jsp页面发送出查询员工列表请求 EmployeeController来接受请求，查出员工数据 来到list.jsp页面进行展示 规定查询请求`URL=”/emps” Restful风格URI： /emp/{id} GET查询员工 /emp 发POST即保存员工 /emp/{id} PUT请求修改员工 /epm/{id} DELETE删除员工 业务层 Service业务层要调用Dao及Mapper层的方法 创建EmployeeService业务层 123456789101112@Service //业务逻辑组件public class EmployeeService { @Autowired //自动装配Mapper/Dao层 EmployeeMapper employeeMapper; //由于Mybatis逆向工程已经生成了查询所有的方法 //查询所有员工 public List<Employee> g ...

删除模块 可以单选进行单个删除 可以多选进行多个删除 点击删除会有是否删除的提示信息 单个删除 URI:/emp/id DELETE 在EmployeeService中添加删除方法 123456789101112 public void deleteEmp(Integer id) { // TODO Auto-generated method stub employeeMapper.deleteByPrimaryKey(id); }public void deleteBatch(List<Integer> ids) { // TODO Auto-generated method stub EmployeeExample example = new EmployeeExample(); EmployeeExample.Criteria criteria = example.createCriteria(); //delete from xxx where ...

修改模块 点击编辑按钮弹出编辑输入框 实现思路 点击编辑弹出用户修改模态框（显示用户信息） 点击更新，完成用户修改 模态框 修改index.jsp文件，新增修改模态框 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051<!-- 员工修改的模态框 --><div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> & ...

布局结构 下载源码 在线Demo 12345678910111213141516<div class="header"> <h1 class="logo"><a href="#"></a></h1> <ul class="register"> <li>登录</li> <li>设置</li> </ul></div><div class="content"> <div class="content_in"> <div class="content_left"></div> <div class="content_right ...

项目优化进度条加载效果 使用到第三方库NProhress，NPM地址：https://www.npmjs.com/package/nprogress Github项目地址：https://github.com/rstacruz/nprogress 运行以下命令安装 1npm install --save nprogress 在main.js中导入，并通过设置拦截器来调用方法。这样网页顶部就会有加载进度条 123456789101112131415import axios from 'axios'// 导入NProgress对应的JS和CSSimport NProgress from 'nprogress'import 'nprogress/nprogress.css'// 在 request 拦截器中，展示进度条 NProgress.start()axios.interceptors.request.use(config => { NProgress.start() return config
...

项目初始化创建项目 前端项目初始化步骤 安装Vue脚手架（全局安装一次即可） 通过Vue脚手架插件项目 配置Vue路由 配置Element-UI组件库 配置Axios库 初始化git远程仓库 将本地项目托管到github或者码云平台 使用Vue可视化界面创建项目，配置命令 1vue ui 然后选择目录创建项目，填写【项目名】和【git初始化信息】，预设可以选择【手动】配置。除了默认勾选外，还需要勾选Router、Vuex、Linter/Formater和使用配置文件 创建成功后出现项目仪表盘。然后需要安装ElementUI插件，在【插件】中搜索vue-cli-plugin-element 默认是完整引入，选择选择按需导入 接下来在【依赖】搜索axios，注意是【运行依赖】安装即可 项目托管 注册登录Gitee后，需要配置SSH公钥才能进行操作。 「个人设置」->「安全设置」->「SSH公钥」->「添加公钥」 如果已经配置了公钥就不需要配置，第一次配置公钥需要输入以下命令。详情参考生成/添加SSH公钥 1ssh-keygen -t ...

添加用户对话框表单 对话框使用到了Dialog 对话框组件，里面再嵌套表单组件。对话框的关闭采用点击事件控制 12// Dialog的属性，data中定义addDialogVisible布尔值:visible.sync="addDialogVisible" 1234567891011121314151617181920212223<!---添加用户的对话框--><el-dialog title="添加用户" :visible.sync="addDialogVisible" width="30%"> <!--内容读取区--> <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px"> <el-form-item label="用户名" ...

登录功能登录流程 登录业务流程 在登录页面输入用户名和密码 调用后台接口进行验证 通过验证之后，根据后台的响应状态跳转到项目主页 登录业务的相关技术点 http是无状态的 通过cookie在客户端记录状态 通过session在服务器端记录状态 通过token方式维持状态【存在跨域推荐使用token】 token原理分析 启动项目 进入vue_shop项目目录，查看项目状态 1git status 我们开发一个新功能时，最后好创建一个分支，然后合并到主分支master上 1234# 创建login分支并切换git checkout -b login# 查看所有分支git branch 在Vue可视化界面中【任务】可以运行【serve】查看当前项目 修改App.vue和路由规则。最好关掉代码校验，创建vue.congig.js文件 123module.exports = { lintOnSave: false} 登录路由 在components下创建Login.vue 123456789101112<template&g ...