数据库操作示例(B/S结构)

本博客提供了一个使用Sql Server 2005和Visual Studio 2008进行B/S结构数据库操作的简单示例。通过SQL语句和C#代码,介绍了如何创建数据库、配置Web.config以及实现功能代码,为学生数据库课程设计提供参考。

一个简单的数据库操作示例程序,便于学生数据库课程设计参考,使用Sql server 2005、VS2008工具,使用SQL、C#语言。

首先在Sql server 2005中建立数据,具体参考的SQL代码如下:

create database mySample
go
use mySample

create table student
(
	sno varchar(10) primary key,
	sname nvarchar(10),
	sex char(2) check(sex in('男','女')),
	age int default 20,
	dept nvarchar(10)
)

insert into student(sno,sname,sex,dept) values('001','张三丰','男','计算机')
insert into student values('002','阿飞','男',17,'计算机')
insert into student values('003','张无忌','男',19,'数学')
insert into student values('004','李寻欢','男',19,'计算机')

go
create proc selectByName(@sn nvarchar(10))
as
	select * from student where sname like '%'+@sn+'%'

go
create proc updateStudent
	@sno varchar(10),
	@sn nvarchar(10),
	@sex nchar,
	@age int,
	@dept nvarchar(10)
as
	update student set sname=@sn,
					   sex=@sex,
					   age=@age,
					   dept=@dept
	where sno =@sno

然后在VS2008中新建网站,具体步骤如下:

1、修改web.config,修改配

<think>我们正在设计一个基于B/S架构的联系人信息管理系统。根据需求,需要实现查看、修改、删除、搜索和添加联系人信息的功能。同时,需要熟悉B/S体系结构、处理流程及各部分功能,掌握B/S结构数据库应用设计技术。 我们将采用SpringBoot作为后端框架(简化开发),Vue.js作为前端框架(构建用户界面),MySQL作为数据库(存储联系人数据)。系统将遵循MVC设计模式,实现前后端分离。 步骤: 1. 系统架构设计 B/S结构(浏览器/服务器模式): - 浏览器:用户通过浏览器访问系统,前端使用Vue.js构建单页面应用(SPA)。 - 服务器:后端使用SpringBoot提供RESTful API,处理业务逻辑和数据库操作。 - 数据库:MySQL存储数据。 2. 数据库设计 设计联系人表(contact): - id: 主键,自增 - name: 姓名 - phone: 电话 - email: 邮箱 - address: 地址 - created_time: 创建时间 - updated_time: 更新时间 SQL建表语句示例: ```sql CREATE TABLE contact ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL, phone VARCHAR(20), email VARCHAR(100), address VARCHAR(255), created_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ); ``` 3. 后端实现(SpringBoot) - 步骤: a. 创建SpringBoot项目,添加Spring Web, Spring Data JPA, MySQL Driver等依赖。 b. 配置数据库连接(application.properties或application.yml)。 c. 创建实体类(Contact)映射数据库表。 d. 创建Repository接口(继承JpaRepository)实现数据访问。 e. 创建Service层,处理业务逻辑。 f. 创建Controller层,提供RESTful API接口。 Controller接口设计: - 查看联系人列表(分页):GET /api/contacts - 添加联系人:POST /api/contacts - 修改联系人:PUT /api/contacts/{id} - 删除联系人:DELETE /api/contacts/{id} - 搜索联系人:GET /api/contacts/search?keyword=xxx 4. 前端实现(Vue.js) - 使用Vue CLI创建项目。 - 使用axios调用后端API。 - 页面组件: - 联系人列表:展示所有联系人,并提供删除和编辑按钮。 - 添加联系人表单:包含姓名、电话、邮箱、地址等输入框。 - 编辑联系人表单:类似添加表单,但数据预填充。 - 搜索框:输入关键字,实时搜索或点击搜索按钮。 5. 前后端交互 - 前端通过HTTP请求与后端交互,数据格式为JSON。 6. 部署 - 前端打包(npm run build)生成静态文件,可部署到Nginx。 - 后端打包为Jar文件,通过java -jar运行。 注意事项: - 输入验证:前后端都需要进行数据验证(如手机号、邮箱格式)。 - 异常处理:后端统一异常处理,返回友好错误信息。 - 跨域问题:后端开启CROS或通过Nginx代理解决。 代码示例(部分): 1. 后端实体类(Contact.java): ```java import javax.persistence.*; import java.time.LocalDateTime; @Entity @Table(name = "contact") public class Contact { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private String phone; private String email; private String address; private LocalDateTime createdTime; private LocalDateTime updatedTime; // 省略getter/setter和构造方法 } ``` 2. 后端Controller(ContactController.java): ```java @RestController @RequestMapping("/api/contacts") public class ContactController { @Autowired private ContactService contactService; @GetMapping public ResponseEntity<List<Contact>> getAllContacts() { return ResponseEntity.ok(contactService.findAll()); } @PostMapping public ResponseEntity<Contact> addContact(@RequestBody Contact contact) { return ResponseEntity.ok(contactService.save(contact)); } @PutMapping("/{id}") public ResponseEntity<Contact> updateContact(@PathVariable Long id, @RequestBody Contact contact) { return ResponseEntity.ok(contactService.update(id, contact)); } @DeleteMapping("/{id}") public ResponseEntity<Void> deleteContact(@PathVariable Long id) { contactService.delete(id); return ResponseEntity.noContent().build(); } @GetMapping("/search") public ResponseEntity<List<Contact>> searchContacts(@RequestParam String keyword) { return ResponseEntity.ok(contactService.search(keyword)); } } ``` 3. 前端Vue组件(ContactList.vue)片段: ```vue <template> <div> <input v-model="keyword" placeholder="输入关键字搜索" @input="search" /> <table> <tr v-for="contact in contacts" :key="contact.id"> <td>{{ contact.name }}</td> <td>{{ contact.phone }}</td> <td>{{ contact.email }}</td> <td>{{ contact.address }}</td> <td> <button @click="editContact(contact)">编辑</button> <button @click="deleteContact(contact.id)">删除</button> </td> </tr> </table> </div> </template> <script> import axios from 'axios'; export default { data() { return { contacts: [], keyword: '' }; }, methods: { search() { axios.get(`/api/contacts/search?keyword=${this.keyword}`) .then(response => { this.contacts = response.data; }); }, deleteContact(id) { axios.delete(`/api/contacts/${id}`) .then(() => { this.search(); // 刷新列表 }); } }, mounted() { this.search(); } }; </script> ``` 通过以上步骤,我们可以实现一个基本的联系人管理系统,满足查看、修改、删除、搜索和添加联系人信息的功能需求,同时熟悉B/S架构的开发流程。 为了进一步掌握B/S结构数据库应用设计技术,可以深入研究以下方面: - 用户认证与授权(如JWT) - 分页查询优化 - 事务管理 - 缓存机制(如Redis) - 安全性(如SQL注入防护,XSS防护) §§相关问题§§ 1. 在B/S架构中,如何保证前后端分离应用的安全性? 2. 如何优化联系人搜索功能的性能(尤其是大数据量时)? 3. 在联系人管理系统中,如何实现用户权限管理(例如不同用户只能管理自己的联系人)? </think>### 基于B/S结构的联系人管理系统设计与实现方法 #### 一、系统架构设计 1. **B/S架构分层**: - **浏览器层**:用户通过浏览器访问系统(HTML/CSS/JavaScript实现界面) - **服务器层**:SpringBoot处理业务逻辑(Java) - **数据层**:MySQL存储联系人数据 - 架构流程:浏览器请求 → Web服务器 → 应用服务器 → 数据库 → 响应返回[^1] 2. **关键技术栈**: - 前端:Vue.js(组件化开发) - 后端:SpringBoot + MyBatis - 数据库:MySQL 8.0 - 接口:RESTful API设计 #### 二、联系人功能实现方案 **1. 数据库设计(MySQL)** ```sql CREATE TABLE contacts ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(50) NOT NULL, phone VARCHAR(20), email VARCHAR(50) UNIQUE, company VARCHAR(100), created_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); ``` **2. RESTful API接口设计** | 功能 | 请求方法 | 接口路径 | 参数示例 | |------------|----------|------------------|---------------------------| | 添加联系人 | POST | /api/contacts | JSON联系人对象 | | 查看详情 | GET | /api/contacts/{id}| URL路径参数 | | 修改联系人 | PUT | /api/contacts/{id}| URL参数+JSON对象 | | 删除联系人 | DELETE | /api/contacts/{id}| URL路径参数 | | 搜索联系人 | GET | /api/contacts | ?name=张&company=腾讯 | **3. 核心代码实现** ```java // SpringBoot控制器示例 @RestController @RequestMapping("/api/contacts") public class ContactController { @Autowired private ContactService contactService; // 添加联系人 @PostMapping public Response addContact(@RequestBody Contact contact) { return contactService.saveContact(contact); } // 关键词搜索 @GetMapping public List<Contact> searchContacts(@RequestParam(required = false) String keyword) { return contactService.search(keyword); } } ``` ```javascript // Vue前端搜索实现 searchContacts() { axios.get('/api/contacts', { params: { keyword: this.searchText } }) .then(response => this.contactList = response.data) } ``` #### 三、关键实现技术 1. **数据持久化**: - 使用MyBatis实现ORM映射 - 事务管理:Spring声明式事务 - 连接池:HikariCP高性能连接池 2. **前端交互优化**: - 异步加载:Axios实现AJAX请求 - 表单验证:Vuelidate库 - 响应式设计:Bootstrap布局 3. **安全性措施**: - SQL注入防护:MyBatis参数绑定 - XSS防护:前端过滤器 - 数据校验:Spring Validation #### 四、开发流程建议 1. 环境搭建:JDK17 + Node.js + MySQL 2. 开发顺序: ```mermaid graph TD A[数据库设计] --> B[后端实体类定义] B --> C[DAO层开发] C --> D[Service业务逻辑] D --> E[Controller接口] E --> F[前端组件开发] ``` 3. 测试要点: - Postman测试API接口 - JUnit单元测试覆盖率 > 80% - 压力测试(JMeter模拟并发请求) #### 五、部署方案 1. 前端部署:Nginx静态资源托管 2. 后端部署:SpringBoot打包为JAR独立运行 3. 数据库:云数据库RDS或本地MySQL 4. 网络配置:域名解析 + HTTPS证书 > 通过此实现方案,可完整掌握B/S架构的分层设计、前后端交互机制、数据库操作等核心技术,同时满足联系人管理的CRUD功能需求。实际开发中建议采用Git进行版本控制,使用Swagger生成API文档[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值