Front end -> thread:

  1. Vant plug-in address editing module + provincial module

    Note:

    1.1 Address editing module data does not contain provincial data, the default is an empty array, to go to the provincial module to copy the data over

    The default value is “areaList: {}”.

  2. Click Save to send a request. The request time will be sent using the existing vant component. The first parameter content is the address information filled in, and the filled content will be written to the database table PATH

    Note:

    IsDefault = 1 or 0 –> content.isdefault = content.isdefault? 1:0;

    2.2 The sent data should contain token, post request, where data is passed in the form of extended operator (important: the teacher did not use the extension operator directly, resulting in error) object extension operator (…) Retrieves all traversable properties from the parameter object and copies them to the current object

    Link: blog.csdn.net/Oralinge/ar…

    data: { ... The content,}, example: < body > < script > let a = {' c ': 1, "b" : 2} let b = {... a } console.log(b); </script> </body>Copy the code

This.$router.push(“/path”);

The front-end code

<template> <div class="addaddress"> <header> <Header> <template #login> <div></div> </template> <template #middle> <div> adds the address </div> </template> </Header> </Header> <section> <section> <template #section> <van-address-edit :area-list="areaList" show-set-default show-search-result :search-result="searchResult" @save="onSave" @change-detail="onChangeDetail" /> <! - < van - area title = "title" : area - the list = "areaList" / > -- > < / template > < Section > < Section > < Tabber > < / Tabber > < / div > </template> <script> import Tabber from "@/components/common/Tabbar.vue"; import Header from "@/components/my/Header.vue"; import Section from "@/components/my/Section.vue"; import { Toast } from "vant"; import http from "@/common/api/request.js"; export default { name: "AddAddress", components: { // Index, Section, Header, Tabber, }, data() { return { areaList: Province_list: {110100: "Beijing ", 120100:" Tianjin ", 440300: {110100: "Beijing ", 120100:" Tianjin ", 440300: "Shenzhen",}, county_list: {110101: "in dongcheng district, 110102:" xicheng district, "440306400498:" baoan district ", / /... }, }, searchResult: [], setDefault: 0, }; }, methods: {async onSave(content)}, methods: {async onSave(content) {// Click save to pass the content to the backend, the backend does the database insert content.isdefault = content.isdefault? 1:0; console.log(content); let res = await http.$axios({ url: "/api/updateNum", method: "POST", headers: { token: true, }, data: { ... content, }, }); if (res.success) Toast(res.msg); $router. Push ("/path"); }, onChangeDetail(val) {if (val) {this.searchResult = [{name: "honglong ", address:" xihu ",},]; } else { this.searchResult = [ { province: "4", city: "3", county: "2", addressDetail: "1", }, ]; ,}}}}; </script> <style lang="less" scoped> .addaddress { display: flex; flex-direction: column; width: 100vw; height: 100vh; overflow: hidden; background-color: rgb(236, 230, 230); } section { flex: 1; overflow: hidden; Ul li {height: 1.706667rem; background-color: #fff; Div {height: 0.8 rem; }} ::v-deep. Van-button --danger {font-size: 0.426667rem; background-color: #13acf3; border: 1px solid #13acf3; } } </style>Copy the code

Back-end thinking:

1. Obtain the parameters passed by the front-end: token note: 1.1 Token to be parsed, the parsed token is assigned to a variable, and then the token is determined to be null. If the token is null, the user information is returned for the front-end to determine. ${tokenObj. Tel} = ${tokenObj. Tel} = ${tokenObj. Get the address information passed from the front end, and deconstruct the required field, save the required field information to the database through SQL note: 2.1 Determine whether the address is 1 by deconstructing the field isDefault, that is, the default address. If it is not 1, directly execute the inserted SQL statement. 2.2 If it is 1, first modify the field isDefault in the database table to 0, and then execute the insert statement. Save address information to the databaseCopy the code

Back-end: interface

Router. post('/ API /updateNum', function (req, res, Next) {// Let tokens = req.headers token; console.log(req.body, 'req.body'); let { name, tel, province, city, county, areaCode, isDefault, addressDetail } = req.body console.log(name, tel, province, city, county, areaCode, isDefault, addressDetail, 'adfadsfadsfa'); Decode (tokens) {tel: '18666554444', IAT: 1628506659} if (tokenObj == null) {res.send({data: { code: 400, success: false, msg: }})} else {// Query the user table based on the mobile phone number obtained by token. Connection. query(' select * from user where tel ="${tokenobj.tel}" ', function (e, R) {if (r.length > 0) {let uid = r[0]. Id Log (typeof isDefault); if (isDefault ! = 1) { connection.query(`insert into path (uid,name, tel, province, city, county, areaCode, isDefault,addressDetail) values ("${uid}","${name}","${tel}","${province}","${city}","${county}","${areaCode}","${isDefault}" ,"${addressDetail}") `, function (err, resultpath) { res.send({ data: { code: 200, success: true, msg: 'Save address successfully ',}})})} // Change the default address isDefault to 0, Connection. query(' update path set isDefault = 0 where uid = ${uid} and isDefault = 1 ', function (e, result) { if (result) { connection.query(`insert into path (uid,name, tel, province, city, county, areaCode, isDefault,addressDetail) values ("${uid}","${name}","${tel}","${province}","${city}","${county}","${areaCode}","${isDefault}" ,"${addressDetail}") `, Function (err, resultPath) {res.send({data: {code: 200, success: true, MSG: 'Save address successfully ',}})}})}}) function (err, resultPath) {res.send({data: {code: 200, success: true, MSG:' Save address successfully ',}})}})}})Copy the code

### page