用户资料连接数据库

编程实践内容（五）  

一、实践目的

1. 了解Vue的基本概念。
2. 掌握vue-cli的安装和使用方法。
3. 熟练使用vue-cli创建Vue应用开发项目。
4. 熟练使用WebStorm开发工具。
5. 了解component、router、view的基本概念与作用。
6. 掌握单文件组件的开发方法 。
7. 熟练使用Vue相关语法完成数据双向绑定、事件监听、HTTP请求。

二、实践要求

（1）请自行完成实验内容，切勿抄袭。

（2）代码要求有注释，注释量不低于20%。

（3）操作过程需要有截图。

三、实验内容

1. 使用npm包管理器安装Vue官方的 CLI工具。
2. 使用vue-cli构建一个Vue开发项目。
3. 创建相关视图Vue，包括<template>、<script>、<style>的代码编写。
4. 使用VueRouter定义网站路由配置。
5. 使用v-show、v-model、v-on、模板语法等指令，完成数据数据双向绑定与显示、事件监听、元素显示控制操作。
6. 使用npm包管理器安装vue-resource组件。
7. 完成SpringBoot跨域请求配置。
8. 使用$http对象完成对服务层的访问并在响应函数中对返回值进行判断，通过$router对象完成路由切换。
9. 网站前端功能要求：

1. 用户登录和注册。
2. 已注册用户列表显示。
3. 用户信息修改维护。
4. 用户信息删除。

1. 选做题：有能力的同学请使用Vue完成其他实体的信息维护、查询、修改、删除页面并实现相应功能，根据完成情况予以加分。

四、关键实验步骤

1. 使用npm包管理器安装Vue官方的 CLI工具

 

2. 使用vue-cli构建一个Vue开发项目

 

3. 创建相关视图Vue，包括<template>、<script>、<style>的代码编写

主界面

 

登陆成功

有欢迎登陆，编辑资料，修改密码，注销账号的功能

 

 

4. 使用VueRouter定义网站路由配置

 

5. 使用v-show、v-model、v-on、模板语法等指令，完成数据数据双向绑定与显示、事件监听、元素显示控制操作

 

6. 使用npm包管理器安装vue-resource组件

 

7. 完成SpringBoot跨域请求配置

 

8. 使用$http对象完成对服务层的访问并在响应函数中对返回值进行判断，通过$router对象完成路由切换

   

 

 

 

9. 网站前端功能要求

用户登录和注册

 

 

 

已注册用户列表显示

 

用户信息修改维护

 

用户信息删除