任务
1、 准备
-- 前后端搭建
-- 页面创建
-- 数据表设计
2、 登录
3、立户
4、出生申报
5、修改
6、注销
1、准备
前端搭建
1.3.创建vue-cli工程
在命令行下进入到工作空间文件夹中，输入如下命令：
vue create population population是工程名（注意：工程名必须全部小写）
如果系统检测到你的网络环境不好，会自动提示是否要切换npm仓库地址：
Shell
复制代码
? Your connection to the default npm registry seems to be slow.
Use https://registry.npmmirror.com for faster installation? (Y/n)
如果出现此选项，选择"Y"即可。
选择预设模板。这里选择“Manually select features”（手动选择特征）
通过 ↑↓ 箭头选择依赖，按 “空格” 选中，按 “a” 全选，按 “i” 反选。
Babel：转码器，可以将ES6代码转为ES5代码，可兼容不支持ES6的浏览器。
TypeScript：是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。。
Progressive Web App (PWA) Support：渐进式Web应用程序
Router ：vue-router（vue路由）
Vuex ：vuex（vue的状态管理模式）
CSS Pre-processors ：CSS 预处理器（如：less、sass）
Linter / Formatter：代码风格检查和格式化（如：ESlint）
Unit Testing ：单元测试（unit tests）
E2E Testing ：e2e（end to end） 测试
第一次创建工程时，可以只选择Babel和Router即可。
选择Vue版本，这里选择Vue3.0。
Shell
复制代码
3.x
2.x
选择是否使用history 形式的路由，也就是询问路径是否带 # 号，这里选择 n。
Shell
复制代码
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
询问将依赖文件放在独立文件中，还是package.json中：为了保持工程配置文件的整洁性，这里选择“In package.json”。
Shell
复制代码
? Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files
In package.json
询问是否将当前选择保存以备下次使用。这里选择“n”。
Shell
复制代码
? Save this as a preset for future projects? (y/N) n
接下来耐心等待安装：最后出现：
npm run serve
package.json中添加如下依赖，安装必要的插件
"dependencies": {
"axios": "^1.4.0",
"qs": "^6.11.2",
......
},
进入到项目目录
cd population
输入
npm install
启动
输入：npm run serve 启动工程。
E:\java5\ssmproject\code\population>npm run serve
后端搭建略SSM
界面设计
App.vue
<template>
<!--路由出口，变动的是这部分内容 -->
<router-view/>
</template>
<style>
input[type='button']:link,input[type='button']:visited{
text-decoration: none;
color:#BFC0B3;
font-size: 14px;
}
input[type='button']:hover{
background-color: #419efe;
border: none;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
Index.vue
<template>
<div class="container">
<div class="left">
<ul>
<li>
<router-link to="/populationAdd">户口立户</router-link>
</li>
<li>
<router-link to="/born">出生申报</router-link>
</li>
<li>
<router-link to="/spouse">夫妻投靠</router-link>
</li>
<li>
<router-link to="/parents">父母投靠子女</router-link>
</li>
<li>
<router-link to="/update">修改信息</router-link>
</li>
<li>
<router-link to="/del">注销户口</router-link>
</li>
</ul>
</div>
<div class="right">
<!-- 路由出口-->
<router-view></router-view>
</div>
</div>
</template>
<script>
</script>
<style scoped>
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background-color: #fff;
display: flex;
}
.left {
flex: 2;
background-color: #304156;
}
.right {
flex: 10;
background-color: #fff;
}
ul {
list-style: none;
}
a:link, a:visited {
text-decoration: none;
color: #BFC0B3;
font-size: 14px;
}
a:hover {
background-color: #419efe;
border: none;
}
</style>
index.js
import Index from '@/views/population/Index'
import PopulationAdd from '@/views/population/PopulationAdd'
import Born from '@/views/population/Born'
import Update from '@/views/population/Update'
import Del from '@/views/population/Del'
import Spouse from '@/views/population/Spouse'
import Parents from '@/views/population/Parents'
const routes = [
{
path:"/",
name:"index",
component:Index,
children:[
{path:"/populationAdd", name:"populationAdd", component:PopulationAdd},
{path:"/born", name:"born", component:Born},
{path:"/update", name:"update", component:Update},
{path:"/del", name:"del", component:Del},
{path:"/spouse", name:"spouse", component:Spouse},
{path:"/parents", name:"parents", component:Parents}
]
}
]
公共组件comonents/Regist.vue
<template>
<div class="regist">
<h3>{{title}}</h3>
<table border="0" cellspacing="10px" cellpadding="0" width="90%">
<tr>
<td class="strong right" width="10%">姓 名:</td>
<td width="20%" class="left">
<input type="text" v-model="form.name" />
</td>
<td class="strong right" width="10%">性 别:</td>
<td width="20%" class="left">
<select v-model="form.sex" >
<option v-for="item in state.sexList" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="10%">与户主关系:</td>
<td width="30%" class="left">
<select v-model="form.relation">
<option v-for="item in state.relationList" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
</tr>
<tr>
<td class="strong right">出生日期:</td>
<td class="left">
<input type="date" v-model="form.birthday" />
</td>
<td class="strong right">身份证号:</td>
<td class="left">
<input type="text" v-model="form.idNumber" />
</td>
<td class="strong right">宗教信仰:</td>
<td class="left">
<input type="text" v-model="form.religiousBelief" />
</td>
</tr>
<tr>
<td class="strong right" width="12%">文化程度:</td>
<td width="18%" class="left">
<select v-model="form.educationalLevel">
<option v-for="item in state.edulist" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">婚姻状况:</td>
<td width="18%" class="left">
<select v-model="form.marriage">
<option v-for="item in state.marriagelist" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">兵役情况:</td>
<td width="28%" class="left">
<select v-model="form.militaryService">
<option v-for="item in state.militarylist" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
</tr>
<tr>
<td class="strong right" width="12%">民 族:</td>
<td width="18%" class="left">
<select v-model="form.nation">
<option v-for="item in state.nationlist" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">血 型:</td>
<td width="18%" class="left">
<select v-model="form.bloodType">
<option v-for="item in state.bloodlist" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">职 业:</td>
<td width="28%" class="left">
<input type="text" v-model="form.job" />
</td>
</tr>
<tr>
<td class="strong right" width="12%">住 址:</td>
<td width="18%" class="left">
<input type="text" v-model="form2.address" />
</td>
<td class="strong right" width="12%">户口类型:</td>
<td width="18%" class="left">
<select v-model="form2.populationType">
<option v-for="item in state.populationTypeList" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">户主姓名</td>
<td width="28%" class="left">
<input type="text" v-model="form2.houseHolder" />
</td>
</tr>
<tr>
<td colspan="6" class="mid">
<input type="button" value="保存" @click="regist()" />
</td>
</tr>
</table>
</div>
</template>
<script setup>
import {onMounted, reactive} from 'vue';
import axios from 'axios';
//backup01后台用的 = 0-立户 1-出生申报 2-夫妻投靠 3-父母投靠子女
//title 前台的 populationId 存到哪个户口下
const myProps = defineProps(['title','populationId','operate'])
let form = reactive({
name: undefined,
sex: undefined,
relation: undefined,
birthday: undefined,
idNumber: undefined,
educationalLevel: undefined,
marriage: undefined,
militaryService: undefined,
nation: undefined,
bloodType: undefined,
job: undefined,
populationId: undefined,
religiousBelief: undefined,
operate:undefined
})
let form2=reactive({
address: undefined,
populationType:undefined,//户口类型，城镇 非城镇
houseHolder:undefined//户主姓名,
})
//1,性别数据开始时置空
let state =reactive({sexList:[],
relationList:[],edulist:[],
marriagelist:[],militarylist:[],
nationlist:[],bloodlist:[],populationTypeList:[]})
function regist() {
}
onMounted(()=>{
})
</script>
<style scoped>
.strong {
font-weight: 600;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
h3 {
display: flex;
justify-content: center;
align-items: center;
}
.mid {
text-align: center;
}
</style>
立户PopulationAdd.vue
<template>
<div id="populationadd">
<!-- operate 0-立户 1-出生申报 2-夫妻投靠 3-父母投靠子女 4-修改 -->
<regist title="户口立户" operate="0" ></regist>
</div>
</template>
<script setup>
import regist from '@/components/Regist'
</script>
<style>
</style>
出生申报Born.vue
<template>
<div class="regist">
<div class="left">
监护人身份证号：<input
type="text" v-model="state.idNumber" />
<input type="button" value="查询" @click="selectPerson()" />
<input type="button" value="同户查询" @click="selectPersonAll()" />
</div>
<table width="100%" border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="#dadada">
<tr align="center">
<th width="15%" height="25" valign="middle">户口类别</th>
<th width="10%" height="25" valign="middle">户号</th>
<th width="10%" height="25" valign="middle">关系</th>
<th width="10%" height="25" valign="middle">姓名</th>
<th width="5%" height="25" valign="middle">性别</th>
<th width="10%" height="25" valign="middle">生日</th>
<th width="5%" height="25" valign="middle">民族</th>
<th width="15%" height="25" valign="middle">证件号</th>
</tr>
<tr align="center" v-for="item in state.list">
<td height="25" valign="middle">{{item.populationType}}</td>
<td height="25" valign="middle">{{item.populationId}}</td>
<td height="25" valign="middle">{{item.relation}}</td>
<td height="25" valign="middle">{{item.name}}</td>
<td height="25" valign="middle">{{item.sex}}</td>
<td height="25" valign="middle">{{item.birthday}}</td>
<td height="25" valign="middle">{{item.nation}}</td>
<td height="25" valign="middle">{{item.idNumber}}</td>
</tr>
</table>
<regist title="出生申报" :populationId="state.populationId" operate=1 ></regist>
</div>
</template>
<script setup>
import axios from 'axios';
import { reactive } from 'vue';
import regist from '@/components/Regist'
let state=reactive({idNumber:undefined,list:[],populationId:undefined})
function selectPerson(){
}
function selectPersonAll(){
}
</script>
<style scoped>
.strong {
font-weight: 600;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
h3 {
display: flex;
justify-content: center;
align-items: center;
}
.mid {
text-align: center;
}
</style>
夫妻投靠spouse.vue
<template>
<div class="regist">
<div class="left">
被投靠人身份证号：<input
type="text" v-model="state.idNumber" />
<input type="button" value="查询" @click="selectPerson()" />
<input type="button" value="同户查询" @click="selectPersonAll()" />
</div>
<table width="100%" border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="#dadada">
<tr align="center">
<th width="15%" height="25" valign="middle">户口类别</th>
<th width="10%" height="25" valign="middle">户号</th>
<th width="10%" height="25" valign="middle">关系</th>
<th width="10%" height="25" valign="middle">姓名</th>
<th width="5%" height="25" valign="middle">性别</th>
<th width="10%" height="25" valign="middle">生日</th>
<th width="5%" height="25" valign="middle">民族</th>
<th width="15%" height="25" valign="middle">证件号</th>
</tr>
<tr align="center" v-for="item in state.list">
<td height="25" valign="middle">{{item.populationType}}</td>
<td height="25" valign="middle">{{item.populationId}}</td>
<td height="25" valign="middle">{{item.relation}}</td>
<td height="25" valign="middle">{{item.name}}</td>
<td height="25" valign="middle">{{item.sex}}</td>
<td height="25" valign="middle">{{item.birthday}}</td>
<td height="25" valign="middle">{{item.nation}}</td>
<td height="25" valign="middle">{{item.idNumber}}</td>
</tr>
</table>
<!-- operate 0-立户 1-出生申报 2-夫妻投靠 3-父母投靠子女 4-修改 -->
<regist title="夫妻投靠" :populationId="state.populationId" operate=2 ></regist>
</div>
</template>
<script setup>
import axios from 'axios';
import { reactive } from 'vue';
import regist from '@/components/Regist'
let state=reactive({idNumber:undefined,list:[],populationId:undefined})
function selectPerson(){
}
function selectPersonAll(){
}
</script>
<style scoped>
.strong {
font-weight: 600;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
h3 {
display: flex;
justify-content: center;
align-items: center;
}
.mid {
text-align: center;
}
</style>
父母投靠parents
<template>
<div class="regist">
<div class="left">
被投靠人身份证号：<input
type="text" v-model="state.idNumber" />
<input type="button" value="查询" @click="selectPerson()" />
<input type="button" value="同户查询" @click="selectPersonAll()" />
</div>
<table width="100%" border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="#dadada">
<tr align="center">
<th width="15%" height="25" valign="middle">户口类别</th>
<th width="10%" height="25" valign="middle">户号</th>
<th width="10%" height="25" valign="middle">关系</th>
<th width="10%" height="25" valign="middle">姓名</th>
<th width="5%" height="25" valign="middle">性别</th>
<th width="10%" height="25" valign="middle">生日</th>
<th width="5%" height="25" valign="middle">民族</th>
<th width="15%" height="25" valign="middle">证件号</th>
</tr>
<tr align="center" v-for="item in state.list">
<td height="25" valign="middle">{{item.populationType}}</td>
<td height="25" valign="middle">{{item.populationId}}</td>
<td height="25" valign="middle">{{item.relation}}</td>
<td height="25" valign="middle">{{item.name}}</td>
<td height="25" valign="middle">{{item.sex}}</td>
<td height="25" valign="middle">{{item.birthday}}</td>
<td height="25" valign="middle">{{item.nation}}</td>
<td height="25" valign="middle">{{item.idNumber}}</td>
</tr>
</table>
<!-- operate 0-立户 1-出生申报 2-夫妻投靠 3-父母投靠子女 4-修改 -->
<regist title="父母投靠子女" :populationId="state.populationId" operate=3 ></regist>
</div>
</template>
<script setup>
import axios from 'axios';
import { reactive } from 'vue';
import regist from '@/components/Regist'
let state=reactive({idNumber:undefined,list:[],populationId:undefined})
function selectPerson(){
}
function selectPersonAll(){
}
</script>
<style scoped>
.strong {
font-weight: 600;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
h3 {
display: flex;
justify-content: center;
align-items: center;
}
.mid {
text-align: center;
}
</style>
修改信息update
<template>
<div class="regist">
<div class="left">
身份证号：<input
type="text" v-model="state.idNumber" />
<input type="button" value="查询" @click="selectPerson()" />
</div>
<regist title="修改信息" operate=4></regist>
<!-- 销户：
1，当前人销户，但户口下还有人
只在person表里把当前人员删除 在person_history表里新增加
2、当前人销户后，户口下没有人：
2.1只在person表里把当前人员删除 在person_history表里新增加
2.2在户口表population里删除当前户的信息，并在population_history表里新增
-->
</div>
</template>
<script setup>
import regist from '@/components/Regist'
import {
onMounted,
reactive
} from 'vue';
import axios from 'axios';
let resultForm = reactive({})
//1,性别数据开始时置空
let state = reactive({
idNumber: '',
form: {
id: undefined,
name: undefined,
sex: undefined,
relation: undefined,
birthday: undefined,
idNumber: undefined,
educationalLevel: undefined,
marriage: undefined,
militaryService: undefined,
nation: undefined,
bloodType: undefined,
job: undefined,
populationId: undefined,
religiousBelief: undefined
},
form2: {
id: undefined,
address: undefined,
populationType: undefined, //户口类型，城镇 非城镇
houseHolder: undefined //户主姓名
}
})
function selectPerson() {
}
function update() {
}
</script>
<style scoped>
.strong {
font-weight: 600;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
h3 {
display: flex;
justify-content: center;
align-items: center;
}
.mid {
text-align: center;
}
</style>
户口注销del
<template>
<div class="regist">
<div class="left">
监护人身份证号：<input
type="text" v-model="state.idNumber" />
<input type="button" value="查询" @click="selectPerson()" />
<input type="button" value="同户查询" @click="selectPersonAll()" />
</div>
<table width="100%" border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="#dadada">
<tr align="center">
<th width="15%" height="25" valign="middle">户口类别</th>
<th width="10%" height="25" valign="middle">户号</th>
<th width="10%" height="25" valign="middle">关系</th>
<th width="10%" height="25" valign="middle">姓名</th>
<th width="5%" height="25" valign="middle">性别</th>
<th width="10%" height="25" valign="middle">生日</th>
<th width="5%" height="25" valign="middle">民族</th>
<th width="15%" height="25" valign="middle">证件号</th>
<th width="15%" height="25" valign="middle">操作</th>
</tr>
<tr align="center" v-for="item in state.list">
<td height="25" valign="middle">{{item.populationType}}</td>
<td height="25" valign="middle">{{item.populationId}}</td>
<td height="25" valign="middle">{{item.relation}}</td>
<td height="25" valign="middle">{{item.name}}</td>
<td height="25" valign="middle">{{item.sex}}</td>
<td height="25" valign="middle">{{item.birthday}}</td>
<td height="25" valign="middle">{{item.nation}}</td>
<td height="25" valign="middle">{{item.idNumber}}</td>
<td height="25" valign="middle">删除</td>
</tr>
</table>
</div>
</template>
<script setup>
import axios from 'axios';
import { reactive } from 'vue';
import regist from '@/components/Regist'
let state=reactive({idNumber:undefined,list:[],populationId:undefined})
function selectPerson(){
}
function selectPersonAll(){
}
</script>
<style scoped>
.strong {
font-weight: 600;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
h3 {
display: flex;
justify-content: center;
align-items: center;
}
.mid {
text-align: center;
}
</style>
数据库设计##
DROP TABLE IF EXISTS constantitem;
CREATE TABLE constantitem (
id int(11) NOT NULL AUTO_INCREMENT,
constantName varchar(20) NOT NULL,
constantTypeId int(11) NOT NULL,
PRIMARY KEY (id),
KEY fk_ctype (constantTypeId),
CONSTRAINT fk_ctype FOREIGN KEY (constantTypeId) REFERENCES constanttype (id)
) ENGINE=InnoDB AUTO_INCREMENT=33 DEFAULT CHARSET=utf8;
-- Records of constantitem
INSERT INTO constantitem VALUES ('1', '男', '1');
INSERT INTO constantitem VALUES ('2', '女', '1');
INSERT INTO constantitem VALUES ('3', '未知', '1');
INSERT INTO constantitem VALUES ('4', '父子', '2');
INSERT INTO constantitem VALUES ('5', '母子', '2');
INSERT INTO constantitem VALUES ('6', '夫妻', '2');
INSERT INTO constantitem VALUES ('7', '兄弟', '2');
INSERT INTO constantitem VALUES ('8', '父女', '2');
INSERT INTO constantitem VALUES ('9', '母女', '2');
INSERT INTO constantitem VALUES ('10', '未上学', '3');
INSERT INTO constantitem VALUES ('11', '小学', '3');
INSERT INTO constantitem VALUES ('12', '初中', '3');
INSERT INTO constantitem VALUES ('13', '高中', '3');
INSERT INTO constantitem VALUES ('14', '大专', '3');
INSERT INTO constantitem VALUES ('15', '大学', '3');
INSERT INTO constantitem VALUES ('16', '硕士', '3');
INSERT INTO constantitem VALUES ('17', '未婚', '4');
INSERT INTO constantitem VALUES ('18', '已婚', '4');
INSERT INTO constantitem VALUES ('19', '丧偶', '4');
INSERT INTO constantitem VALUES ('20', '离异', '4');
INSERT INTO constantitem VALUES ('21', '未服兵役', '5');
INSERT INTO constantitem VALUES ('22', '已服兵役', '5');
INSERT INTO constantitem VALUES ('23', '汉族', '6');
INSERT INTO constantitem VALUES ('24', '满族', '6');
INSERT INTO constantitem VALUES ('25', '朝鲜族', '6');
INSERT INTO constantitem VALUES ('26', '锡伯族', '6');
INSERT INTO constantitem VALUES ('27', 'A', '7');
INSERT INTO constantitem VALUES ('28', 'B', '7');
INSERT INTO constantitem VALUES ('29', 'AB', '7');
INSERT INTO constantitem VALUES ('30', 'O', '7');
INSERT INTO constantitem VALUES ('31', '非城镇', '8');
INSERT INTO constantitem VALUES ('32', '城镇', '8');
-- Table structure for constanttype
DROP TABLE IF EXISTS constanttype;
CREATE TABLE constanttype (
id int(11) NOT NULL AUTO_INCREMENT,
constantTypeCode varchar(10) NOT NULL COMMENT '类别编码',
constantTypeName varchar(255) NOT NULL COMMENT '类别名称',
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;
-- Records of constanttype
INSERT INTO constanttype VALUES ('1', 'xb', '性别');
INSERT INTO constanttype VALUES ('2', 'hzgx', '户主关系');
INSERT INTO constanttype VALUES ('3', 'whcd', '文化程度');
INSERT INTO constanttype VALUES ('4', 'hyzk', '婚姻状况');
INSERT INTO constanttype VALUES ('5', 'byqk', '兵役情况');
INSERT INTO constanttype VALUES ('6', 'mz', '民族');
INSERT INTO constanttype VALUES ('7', 'xx', '血型');
INSERT INTO constanttype VALUES ('8', 'hklx', '户口类型');
-- Table structure for person
DROP TABLE IF EXISTS person;
CREATE TABLE person (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(30) NOT NULL,
sex int(3) NOT NULL,
relation int(3) NOT NULL COMMENT '与户主关系',
birthday date NOT NULL,
idNumber varchar(18) NOT NULL COMMENT '身份证号',
educationalLevel int(10) DEFAULT NULL COMMENT '教育程度',
marriage int(3) DEFAULT NULL COMMENT '婚姻状况',
militaryService int(3) DEFAULT NULL COMMENT '兵役情况',
nation int(3) DEFAULT NULL COMMENT '民族',
bloodType int(3) DEFAULT NULL COMMENT '血型',
job varchar(50) DEFAULT NULL COMMENT '职业',
populationId varchar(32) DEFAULT NULL COMMENT '户号',
religiousBelief varchar(20) DEFAULT NULL COMMENT '宗教信仰',
backup02 varchar(20) DEFAULT NULL,
PRIMARY KEY (id),
KEY fk_popnum (populationId),
CONSTRAINT fk_popnum FOREIGN KEY (populationId) REFERENCES population (id)
) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=utf8;
DROP TABLE IF EXISTS person_history;
CREATE TABLE person_history (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(30) NOT NULL,
sex int(3) NOT NULL,
relation int(3) NOT NULL COMMENT '与户主关系',
birthday date NOT NULL,
idNumber varchar(18) NOT NULL COMMENT '身份证号',
educationalLevel int(10) DEFAULT NULL COMMENT '教育程度',
marriage int(3) DEFAULT NULL COMMENT '婚姻状况',
militaryService int(3) DEFAULT NULL COMMENT '兵役情况',
nation int(3) DEFAULT NULL COMMENT '民族',
bloodType int(3) DEFAULT NULL COMMENT '血型',
job varchar(50) DEFAULT NULL COMMENT '职业',
populationId varchar(32) DEFAULT NULL COMMENT '户号',
religiousBelief varchar(20) DEFAULT NULL COMMENT '宗教信仰',
backup02 varchar(20) DEFAULT NULL,
PRIMARY KEY (id),
KEY fk_popnum (populationId)
) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=utf8;
DROP TABLE IF EXISTS person_log;
CREATE TABLE person_log (
id int(11) NOT NULL AUTO_INCREMENT,
populationId varchar(32) NOT NULL,
personId int(11) NOT NULL,
operateType varchar(2) DEFAULT NULL,
operateTime datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
operateUser int(11) DEFAULT NULL,
operateDetail varchar(255) DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;
DROP TABLE IF EXISTS population;
CREATE TABLE population (
id varchar(32) NOT NULL,
populationType varchar(40) NOT NULL COMMENT '1-非城镇 2-城镇',
houseHolder varchar(20) NOT NULL COMMENT '户主姓名',
address varchar(100) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
DROP TABLE IF EXISTS population_history;
CREATE TABLE population_history (
id varchar(32) NOT NULL,
populationType varchar(3) NOT NULL COMMENT '1-非城镇 2-城镇',
houseHolder varchar(20) NOT NULL COMMENT '户主姓名',
address varchar(100) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
DROP TABLE IF EXISTS population_log;
CREATE TABLE population_log (
id int(11) NOT NULL AUTO_INCREMENT,
populationId varchar(32) NOT NULL,
operateType varchar(2) DEFAULT NULL COMMENT '操作类型',
operateDetail varchar(255) DEFAULT NULL COMMENT '操作详情',
operateTime datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
operateUser int(11) DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
DROP TABLE IF EXISTS user;
CREATE TABLE user (
id int(11) NOT NULL AUTO_INCREMENT,
userName varchar(20) NOT NULL,
password varchar(20) NOT NULL,
role char(1) DEFAULT NULL COMMENT '2-管理员 1-超级管理员',
PRIMARY KEY (id)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
-- Records of user
INSERT INTO user VALUES ('1', 'admin', '123456', '1');
SET FOREIGN_KEY_CHECKS=1;
登录页
<template>
<div id="login">
<div id="content">
<h2>东软人口管理系统</h2>
<input type="text" v-model="state.form.userName"/><br>
<input type="password" v-model="state.form.password"/><br>
<button id="btn01" @click="login()">登录</button>
</div>
</div>
</template>
<script setup>
import { reactive } from 'vue';
let state=reactive({form:{
userName:undefined,
password:undefined
}})
function login(){
alert(state.form.userName)
alert(state.form.password)
}
</script>
<style scoped>
h2{
color: gray;
font-family: '宋体';
}
#login{
width:100vw;
height:100vh;
background-image: url('../../assets/back.jpg');
display: flex;
justify-content: center;
align-items: center;
background-size: 100%;
}
#content{
width:30vw;
height:50vh;
background-color: aliceblue;
border-radius: 1%;
display: flex;
flex-direction: column;
align-items: center;
}
#content input{
width:20vw;
height:4vh;
border:1px solid gainsboro;
}
#content #btn01{
width:20vw;
height:5vh;
background-color: #419efe;
border:none;
color:#fff;
font-size:1vw;
font-weight: 500;
}
</style>
2、 登录
登录后台
ResultMsg 为通用的返回对象
@Data
public class ResultMsg {
//返回码 0-成功 -1 用户名错误 -2密码错误
int code;
//描述 成功/错误原因
String message;
}
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
IUserService service;
@RequestMapping("/login")
public ResultMsg login(@RequestBody User user){
return service.login(user);
}
}
@Service
public class UserServiceImpl implements IUserService {
@Autowired
UserMapper mapper;
@Override
public ResultMsg login(User user) {
//根据用户名查询用户
User db_user=mapper.getUserByUserName(user.getUserName());
//如果没有查询到，直接回复用户名不存在
ResultMsg rm=new ResultMsg();
if(db_user==null){
rm.setCode(-1);
rm.setMessage("用户名错误");
}else if(!db_user.getPassword().equals(user.getPassword())){
//如果查询到，比对数据库里的密码与传过来的密码是否一致
//如果不一致，直接回复密码错误
rm.setCode(-2);
rm.setMessage("密码错误");
//如果一致，返回成功
}else{
rm.setCode(0);
rm.setMessage("登录成功");
}
return rm;
}
}
public interface UserMapper {
@Select("select * from user where userName=#{userName}")
User getUserByUserName(String userName);
}
登录前台
<template>
<div id="login">
<div id="content">
<h2>东软人口管理系统</h2>
<input type="text" v-model="state.form.userName" /><br>
<input type="password" v-model="state.form.password" /><br>
<button id="btn01" @click="login()">登录</button>
<div v-if="state.flag">{{state.msg}}</div>
</div>
</div>
</template>
<script setup>
import axios from 'axios';
import {reactive} from 'vue';
import {useRouter} from 'vue-router';
let router = useRouter();
let state = reactive({
form: {
userName: undefined,
password: undefined
},
msg: '',
flag: false
})
function login() {
axios.post("http://localhost:8081/ssmstudy/user/login", state.form)
.then(res => {
if (res.data.code == 0) {
//跳转到index
router.push("/index")
} else {
state.msg = res.data.message
state.flag = true
}
})
}
</script>
<style scoped>
h2 {
color: gray;
font-family: '宋体';
}
#login {
width: 100vw;
height: 100vh;
background-image: url('../../assets/back.jpg');
display: flex;
justify-content: center;
align-items: center;
background-size: 100%;
}
#content {
width: 30vw;
height: 50vh;
background-color: aliceblue;
border-radius: 1%;
display: flex;
flex-direction: column;
align-items: center;
}
#content input {
width: 20vw;
height: 4vh;
border: 1px solid gainsboro;
}
#content #btn01 {
width: 20vw;
height: 5vh;
background-color: #419efe;
border: none;
color: #fff;
font-size: 1vw;
font-weight: 500;
}
</style>
