node和vue实现商城用户地址模块

商城用户地址模块可以通过node和vue来进行实现。本攻略将详细介绍如何使用node和vue实现商城用户地址模块，包括前端和后端的所有代码和示例。

前端部分

1.项目初始化

首先使用vue-cli进行项目初始化，具体步骤：

npm install -g vue-cli
vue init webpack address-module

2.样式开发

使用element-ui搭建页面样式，具体步骤：

npm install element-ui --save

在main.js中引入并注册组件：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3.地址模块开发

在src/components下创建AddressModule.vue，编辑模板代码，示例代码：

<template>
  <div>
    <div v-if="!isEditable">
      <span>{{address.province}}</span>
      <span>{{address.city}}</span>
      <span>{{address.area}}</span>
      <span>{{address.detail}}</span>
    </div>
    <div v-else>
      <el-select v-model="address.province" placeholder="省份" @change="handleChangeProvince">
        <el-option v-for="province in provinces" :key="province.id" :label="province.name" :value="province.name"></el-option>
      </el-select>
      <el-select v-model="address.city" placeholder="城市" @change="handleChangeCity">
        <el-option v-for="city in cities" :key="city.id" :label="city.name" :value="city.name"></el-option>
      </el-select>
      <el-select v-model="address.area" placeholder="区域">
        <el-option v-for="area in areas" :key="area.id" :label="area.name" :value="area.name"></el-option>
      </el-select>
      <el-input v-model="address.detail" placeholder="详细地址"></el-input>
      <el-button @click="handleSave">保存</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddressModule',
  data() {
    return {
      isEditable: false,
      provinces: [],
      cities: [],
      areas: [],
      address: {
        province: '',
        city: '',
        area: '',
        detail: ''
      }
    }
  },
  methods: {
    handleChangeProvince() {
      // 根据选择的省份更新城市选项
      // 代码省略
    },
    handleChangeCity() {
      // 根据选择的城市更新区域选项
      // 代码省略
    },
    handleSave() {
      // 保存地址信息
      // 代码省略
    },
    handleCancel() {
      // 取消编辑
      // 代码省略
    }
  }
}
</script>

对应的样式代码：

.el-select {
  width: 150px;
  margin-right: 10px;
}
.el-input {
  width: 300px;
  margin-right: 10px;
}

4.模块调用

在需要使用地址模块的页面中引用组件并传递地址信息，示例代码：

<template>
  <div>
    <address-module :address="address" @save="handleSaveAddress"></address-module>
  </div>
</template>

<script>
import AddressModule from '@/components/AddressModule.vue';

export default {
  name: 'AddressPage',
  components: {
    AddressModule
  },
  data() {
    return {
      address: {
        province: '',
        city: '',
        area: '',
        detail: ''
      }
    }
  },
  methods: {
    handleSaveAddress() {
      // 保存地址信息
      // 代码省略
    }
  }
}
</script>

后端部分

1.项目初始化

使用express-generator初始化项目，具体步骤：

npm install -g express-generator
express address-api
cd address-api
npm install

2.数据库配置

使用mysql数据库存储地址信息，首先需要配置数据库连接信息，在config.js中配置：

module.exports = {
  db: {
    host: 'localhost',
    user: 'root',
    password: '123456',
    database: 'address_db'
  }
}

3.地址信息存储

使用sequelize操作数据库进行地址信息的存储，具体步骤：

npm install sequelize --save
npm install mysql2 --save

在models文件夹下创建address.js，示例代码：

const Sequelize = require('sequelize');
const sequelize = require('../util/database');

const Address = sequelize.define('address', {
  id: {
    type: Sequelize.INTEGER,
    autoIncrement: true,
    allowNull: false,
    primaryKey: true
  },
  province: {
    type: Sequelize.STRING,
    allowNull: false
  },
  city: {
    type: Sequelize.STRING,
    allowNull: false
  },
  area: {
    type: Sequelize.STRING,
    allowNull: false
  },
  detail: {
    type: Sequelize.STRING,
    allowNull: false
  }
});

module.exports = Address;

4.地址信息查询

在routes文件夹下创建address.js，示例代码：

const express = require('express');
const router = express.Router();
const db = require('../util/database');
const Address = require('../models/address');

router.get('/:id', (req, res, next) => {
  const id = req.params.id;
  Address.findByPk(id)
    .then(address => {
      res.json(address);
    })
    .catch(err => {
      console.log(err);
      res.sendStatus(500);
    });
});

router.post('/', (req, res, next) => {
  const address = req.body;
  Address.create(address)
    .then(() => {
      res.sendStatus(200);
    })
    .catch(err => {
      console.log(err);
      res.sendStatus(500);
    });
});

router.put('/:id', (req, res, next) => {
  const id = req.params.id;
  const address = req.body;
  Address.update(address, { where: { id: id } })
    .then(() => {
      res.sendStatus(200);
    })
    .catch(err => {
      console.log(err);
      res.sendStatus(500);
    });
});

router.delete('/:id', (req, res, next) => {
  const id = req.params.id;
  Address.destroy({ where: { id: id } })
    .then(() => {
      res.sendStatus(200);
    })
    .catch(err => {
      console.log(err);
      res.sendStatus(500);
    });
});

module.exports = router;

5.模块调用

在数据处理的地方引用address.js并监听端口，示例代码：

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const addressRoutes = require('./routes/address');
const config = require('./config');
const app = express();

app.use(cors());
app.use(bodyParser.json());

app.use('/address', addressRoutes);

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

到此为止，我们已经完成了商城用户地址模块的所有代码实现。通过前后端的配合，用户可以完成地址信息的编辑和保存，同时后端会将地址信息存储到数据库中，便于以后的使用。