Separating the front and rear end
1.1 backend
ssm + maven multi-module
swagger document describes ( Code copied , can be generated )
postman test
Request put / get / post / patch / delete
json
1.2 front-end
Nodejs: front-end service
npm: Management js library dependencies
webpack: Packaging for static resources
vuejs: MVVM (model view view Model -way binding ) model developed js library
ElementUI: distal ui frame
vuecli: vue development Scaffolding , can quickly build vue project , which contains webpack packaged configuration , the server hot start
2 back end of crud
(1) mapper.xml中写select、insert、update、delete
<mapper namespace="cn.itsource.crm.mapper.DepartmentMapper"> <select id="findAll" resultType="Department"> select * from t_department </select> <select id="findOne" parameterType="long" resultType="Department"> select * from t_department where id=#{id} </select> <insert id="save" parameterType="Department"> insert into t_department(name) values(#{name}) </insert> <update id="update" parameterType="Department"> update t_department set name=#{name} where id=#{id} </update> <delete id="delete" parameterType="long"> delete from t_department where id=#{id} </delete> </mapper>
(2) written on the corresponding controller method crud
3 front end interface processing
(1) Configure a xxx.vue page
(2) configure the routing
(3) main.js introduced axios
(4) analog data commented
(5) modify the content of this inside xxx.vue
4 front-access back-end
There will be a cross-domain under what circumstances 4.1
(1) the same domain, different port = "is a cross-domain localhost: 8080 -> localhost: 80
(2) different from the domain name = "part of the cross-domain 192.168.0.1 -> 192.168.0.2
(3) two different domain name = "part of the cross-domain miaosha.jd.com -> qianggou.jd.com
4.2 cross-domain issues
Browser (same origin policy) for ajax request, if access is different domain names, or different ports, will cross-domain problems.
Origin policy: only allow the same protocol, the same name, the same port
4.3 how to solve cross-domain problems
(1) jsonp - early
Tags dynamically constructed, the tag <script> to access resources
Defects: get request / require service support
(2) by nginx (deployment) - to solve the problem of cross-domain> -> reverse proxy mechanism
Similarly brokers, to request access to back into a visit yourself, and let nginx go backstage access, the results back then transferred to the front.
Disadvantages: deploy services, so the configuration
(3) CORS mechanisms: Cross-Origin Resource Sharing "(Cross-origin resource sharing)"
To solve cross-domain problems: Browser homologous strategy (same protocol, the same name, the same port), if not the origin, there is cross-domain problem,
Browser will ajax request is divided into two categories, which is slightly different treatment options: a simple request, special request
Simple request , sent once, run background services need access,
Special request , sent twice, the first time the request is met, the server must run a preflight, preflight found by the front desk, and then send real request, the request need real server allows
Annotations can be used to configure a button: @CrossOrigin
Note: spring version is only required to support annotation after 4.2.5
5 to complete the front end of the crud
(1) list shows (be sure to mount)
/ Get list of departments getDepartments () { the this .listLoading = to true ; // NProgress.start (); the this .. $ Http.patch ( "/ Department / List") the then ((RES) => { // this.total res.data.total =; the this .departments = res.data; the this .listLoading = to false ; }); }
Mount Code:
mounted() { this.getDepartments(); }
(2) new
// display the new interface handleAdd () { the this .addFormVisible = to true ; the this .addForm = { name: '' }; }, // add addSubmit () { the this . $ Refs.addForm.validate ((! Valid) => { IF (! Valid) { the this . $ Confirm The ( 'sure to submit it?', 'Tips', {}). Then ( () => { // load the this .addLoading = to true ; // copy the object this.addForm {name = para: 'XXX'} the let Object.assign para = ({}, the this .addForm); the this . $ HTTP .put ( "/ Department", para) .then ((RES) => { the this .addLoading = to false ; the this . Message $ ({ the Message: 'submitted successfully' , type: 'success' }); // validate reset the this . Refs $ [ 'the addForm' ] .resetFields (); // close the dialog box to add the this .addFormVisible = to false ; the this .getDepartments (); }); }); } }); }
(3) editorial changes
// display editing interface handleEdit (index, Row) { the this .editFormVisible = to true ; the this .editForm = Object.assign ({}, Row); }, //编辑 editSubmit() { this.$refs.editForm.validate((valid) => { if (valid) { this.$confirm('确认提交吗？', '提示', {}).then(() => { this.editLoading = true; //NProgress.start(); let para = Object.assign({}, this.editForm); this.$http.post("/department",para).then((res) => { this.editLoading = false; //NProgress.done(); this.$message({ the Message: 'submitted successfully' , type: 'success' }); this.$refs['editForm'].resetFields(); this.editFormVisible = false; this.getDepartments(); }); }); } }); }
(4) Delete
// delete handleDel (index, Row) { the this . $ Confirm The ( 'confirmation to delete the record?', 'Tips' , { type: 'warning' }).then(() => { this.listLoading = true; this.$http.delete("/department/" + row.id).then((res) => { this.listLoading = false; this.$message({ the Message: 'deleted successfully' , type: 'success' }); this.getDepartments(); }); }).catch(() => { }); }