基于SpringBootVue的图书电子商务网站管理系统从技术选型到完整落地做图书电商系统的需求这两年一直很多不管是课程设计、毕业设计还是中小型书商想搭一套自己的线上销售渠道Spring Boot Vue MyBatis MySQL这套组合几乎是绕不开的标配。这套技术栈的好处很直接Spring Boot负责把后端业务逻辑快速搭起来Vue做前端页面交互MyBatis把数据库操作写得干净可控MySQL存数据。整个项目跑起来轻量、清晰而且市面上资料多、坑也基本都被踩平了特别适合拿来学习和二次开发。我前阵子刚帮人完成了一套完整的图书电子商务网站管理系统从数据库设计、后端API开发、前端页面联调到最后的部署上线走完了全程。这篇文章就把整个系统的架构思路、核心实现、还有我实际踩过的坑一次性说清楚。项目本身用的是经典的B/S结构后端拆成了用户端和管理端两套接口逻辑前端用Vue Router做路由控制配合Element UI做后台管理界面前台展示部分则自己写了商品列表、搜索、购物车、订单结算这些核心模块。这套系统适合谁呢如果你是正在做毕业设计的学生想找一个结构完整、代码规范、可以直接扩展的项目参考或者你是刚入行的Java开发想搞明白Spring Boot MyBatis在实际业务里到底怎么配合使用又或者你是个小书商需要一套能跑起来的线上卖书方案——这篇文章都能给你实实在在的帮助。下面我按项目推进的顺序把每一块的技术要点和实操细节都展开聊聊。1. 项目整体架构与设计思路1.1 技术栈选型背后的逻辑先说说为什么是这套组合而不是别的。很多人一上来就纠结“Spring Boot是不是太老了”“为什么不用Spring Cloud微服务”“前端为什么不用React”。说实话对于图书电商系统这种业务量级微服务纯属给自己找麻烦一套单体应用完全能扛住几万本书、几千用户的日常访问。技术选型的核心永远是“匹配业务复杂度”而不是“追最新最炫”。Spring Boot在这个项目里承担的是后端基础框架的角色。它相比传统的SSHSpring Struts Hibernate或者SSM手动配置时代最大的优势是“约定大于配置”内嵌Tomcat、自动配置Starter、打包即运行开发效率高出一大截。我用的是Spring Boot 2.7.x版本这个版本比较稳妥既能享受Spring Boot 2.x的成熟生态又不会有Spring Boot 3.0以后包名变更javax到jakarta带来的适配问题。MyBatis做持久层框架是因为它在复杂查询的灵活度上确实比JPA好使。图书商城这类系统搜索条件经常是动态拼接的书名模糊查询、分类过滤、价格区间、上下架状态用MyBatis写动态SQL非常顺手。再加上一级缓存和二级缓存机制在高频读取场景下能明显减轻数据库压力。前端选Vue 2.6 Element UI主要看中它的组件生态和完善的中文文档。Vue的双向绑定语法让表单操作非常舒服Element UI的表格、分页、弹窗、表单验证这些后台管理常用组件开箱即用省掉大量造轮子的时间。前台展示部分没有用UI框架直接用原生CSS加Flexbox布局手写的这样页面加载更快也不会千篇一律全是Element的风格。MySQL 8.0作为数据库支持JSON字段、窗口函数性能比5.7有明显提升安装配置也很简单。唯一要注意的是8.0的认证插件是caching_sha2_password用老版本Navicat连不上后面我会专门提到这个问题。1.2 系统功能模块拆解图书电商系统的功能其实就两个大方向一是“用户能干什么”二是“管理员能干什么”。用户端我拆成了这些模块图书展示首页推荐位、分类浏览、图书详情页搜索与筛选关键字搜索、按分类/价格/出版时间筛选购物车加入、修改数量、删除、全选结算订单管理下单、支付模拟、查看订单状态、取消订单用户中心注册登录、个人信息修改、收货地址管理评论模块对已购图书进行评价展示图书评分管理端要简单粗暴一些核心就是数据管理图书管理上架/下架、编辑库存、价格调整、封面上传分类管理图书分类的增删改查订单管理查看所有订单、发货操作、退款处理用户管理用户列表、状态禁用/启用数据统计销售概览简单点的做法就是SQL聚合然后前端用图表展示模块划分的原则是“高内聚低耦合”每个模块在后端对应一个Controller Service Mapper的垂直切分前端对应一个views目录下的页面文件夹。新加一个功能时只需要顺着这个结构往里填代码就行不用改动已有逻辑。1.3 前后端交互机制与接口约定前后端分离项目的关键是把“接口契约”定清楚。我用的统一返回格式是{ code: 200, message: 操作成功, data: {} }code统一用200表示成功非200表示各种异常message给前端直接弹出提示用的data是真正的业务数据。这样做的好处是前端axios拦截器只用判断一次code不需要每个接口单独处理异常分支。RESTful设计上遵循“资源动作”的原则。比如GET /api/books?keywordxxxcategoryId1pageNum1pageSize10分页查询图书GET /api/books/{id}查询图书详情POST /api/orders创建订单PUT /api/orders/{id}/status更新订单状态发货、取消POST /api/admin/books新增图书所有接口统一以/api开头方便nginx做反向代理时区分前后端请求。管理端接口加了一层/admin前缀配合拦截器做权限校验后面安全设计部分我会详细说。2. 后端核心实现与数据库设计2.1 数据库表结构设计详解图书电商系统的表结构我最核心的是这八张表用户表、图书表、分类表、购物车表、订单表、订单项表、地址表、评论表。先看用户表CREATE TABLE user ( id bigint NOT NULL AUTO_INCREMENT, username varchar(50) NOT NULL COMMENT 用户名, password varchar(255) NOT NULL COMMENT 密码加盐哈希, nickname varchar(50) DEFAULT NULL, phone varchar(20) DEFAULT NULL, email varchar(100) DEFAULT NULL, avatar varchar(255) DEFAULT NULL, status tinyint NOT NULL DEFAULT 1 COMMENT 1正常 0禁用, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;密码字段我特别强调一下绝对不能用明文。这里用的是BCryptPasswordEncoder进行加盐哈希同一个密码每次加密结果都不一样安全性比MD5高一个数量级。图书表是核心表字段比较多我把关键部分列出来CREATE TABLE book ( id bigint NOT NULL AUTO_INCREMENT, title varchar(200) NOT NULL COMMENT 书名, author varchar(100) DEFAULT NULL, publisher varchar(100) DEFAULT NULL, isbn varchar(20) DEFAULT NULL COMMENT 国际标准书号, category_id bigint DEFAULT NULL COMMENT 分类ID, price decimal(10,2) NOT NULL COMMENT 定价, discount_price decimal(10,2) DEFAULT NULL COMMENT 折扣价, cover_image varchar(255) DEFAULT NULL COMMENT 封面图URL, description text COMMENT 图书简介, stock int NOT NULL DEFAULT 0 COMMENT 库存, sales_count int NOT NULL DEFAULT 0 COMMENT 销量, status tinyint NOT NULL DEFAULT 1 COMMENT 1上架 0下架, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_category (category_id), KEY idx_title (title), KEY idx_status (status) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;有个细节值得注意我在title上建了普通索引不是全文索引因为图书搜索通常是用LIKE %keyword%做模糊匹配这类查询普通索引也能起到一定的优化作用。如果以后数据量真的上千万了再考虑引入Elasticsearch但现阶段MySQL完全够用。订单表和订单项表是典型的“主表-子表”设计我刻意把它俩分开而不是在订单表里存一个JSON数组。原因很简单订单项需要单独统计销量、退货还需要按图书维度做数据分析拆开来查询效率高很多。2.2 Spring Boot后端分层结构与关键代码后端代码我按标准的三层架构来组织包路径是com.example.bookstore下面四个子包controller接收HTTP请求参数校验返回统一结果service业务逻辑层事务控制在这里mapperMyBatis的数据访问接口entity数据库实体类common放通用工具类、异常处理、配置类以图书分页查询为例这串代码很能说明MyBatis的写法RestController RequestMapping(/api/books) public class BookController { Autowired private BookService bookService; GetMapping public Result getBooks(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String keyword, RequestParam(required false) Long categoryId) { PageHelper.startPage(pageNum, pageSize); BookQuery query new BookQuery(); query.setKeyword(keyword); query.setCategoryId(categoryId); query.setStatus(1); // 前台只查上架的 ListBook bookList bookService.getBookList(query); PageInfoBook pageInfo new PageInfo(bookList); return Result.success(pageInfo); } }这里用到了PageHelper分页插件用法就是PageHelper.startPage(pageNum, pageSize)之后紧跟着的第一次Mapper查询会自动被拦截拼接LIMIT语句然后PageInfo里会带上total、pageNum、pages这些分页元数据前端表格组件直接就能用。Mapper层的写法我用的是XML映射文件而不是注解SQL。为什么因为这个项目的查询条件组合太多XML文件里写动态SQL比Java代码里拼字符串直观得多select idselectBookList resultTypecom.example.bookstore.entity.Book SELECT * FROM book where if testkeyword ! null and keyword ! AND title LIKE CONCAT(%, #{keyword}, %) /if if testcategoryId ! null AND category_id #{categoryId} /if if teststatus ! null AND status #{status} /if /where ORDER BY create_time DESC /select这个where标签很关键它会自动处理“第一个条件前面的AND怎么去掉”这个经典问题避免你写出一堆带WHERE 11的尴尬SQL。事务处理这类业务上我直接在Service层加Transactional注解。比如下单这个操作涉及扣库存、生成订单、清空购物车三个动作任何一个失败都必须回滚不然库存和订单就对不上了。Spring声明式事务在这里就是一行注解的事但要注意Transactional默认只回滚RuntimeException如果业务里抛的是受检异常记得指定rollbackFor Exception.class。2.3 MyBatis缓存机制与性能优化实践说到MyBatis有个高频知识点必须讲清楚就是它的两级缓存。一级缓存是SqlSession级别的默认开启同一个SqlSession内执行相同的查询第二次直接返回缓存结果不查数据库。但在Spring Boot里每个请求都由Spring管理SqlSession一次请求内基本就是同一个连接所以一级缓存的生命周期很短作用有限。二级缓存是namespace级别的需要手动开启。在Mapper XML文件里加一行cache evictionLRU flushInterval600000 size512 readOnlytrue/开启二级缓存后同一个Mapper的所有查询结果会缓存在JVM内存里缓存时间由flushInterval控制我这里设置是10分钟当执行了增删改操作时缓存会自动清空。这对图书列表这类“读多写少”的场景非常管用。但我要提醒一下如果你的业务涉及多表关联查询结果缓存到某个Mapper下是有风险的——因为关联表的数据变更不会触发这个Mapper的缓存清空容易读到脏数据。所以我的做法是只有单表查询的Mapper才开启二级缓存关联查询全部关闭宁可牺牲一点性能也要保证数据一致性。还有一个让很多人困惑的小问题“MyBatis单个数字字符比较”。比如你在XML里想判断某个状态值if teststatus 1这么写会报错。原因是MyBatis把1当成了字符类型在比较时会引发进制转换异常。正确的写法是if teststatus 1外层用单引号内层用双引号或者写成if teststatus 1.toString()。这个坑看起来小但排查起来很费时间我第一次遇到时也是查了半天才搞明白。3. 前端Vue页面开发与系统联调3.1 Vue项目结构与环境搭建要点前端我用Vue CLI创建项目目录结构按功能组织src/ ├── api/ # 接口请求封装按模块拆分文件 ├── assets/ # 静态资源 ├── components/ # 公共组件分页、上传、评论等 ├── router/ # Vue Router路由配置 ├── store/ # Vuex状态管理购物车、用户信息 ├── views/ │ ├── home/ # 前台首页 │ ├── book/ # 图书列表、详情 │ ├── cart/ # 购物车 │ ├── order/ # 订单 │ ├── user/ # 用户中心 │ └── admin/ # 后台管理 └── utils/ # 工具函数request.js等request.js是全局axios实例的封装所有请求都会经过这里我在这儿统一做了三件事请求头加token、响应拦截器统一处理code非200的情况、401跳转登录页。import axios from axios import { Message } from element-ui import router from /router const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) } return res.data }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) router.push(/login) } Message.error(网络异常请稍后重试) return Promise.reject(error) } )返回res.data这一步很妙页面里调用接口时拿到的就直接是业务数据了不用每个地方都写res.data.data省了不少事。3.2 图书商城核心页面实现思路前台首页我用了轮播图加分类导航加“新书上架”列表的经典布局。从逻辑上讲首页的展示数据来自三个接口轮播图配置、分类列表、最新图书分页。Vue的生命周期created里并行请求这三个接口然后渲染。图书列表页的重点是筛选和分页。筛选条件通过this.queryParams对象统一维护每次条件变化就调用fetchData重新请求。这里我用watch监听筛选条件变化watch: { queryParams.categoryId: function() { this.queryParams.pageNum 1 this.fetchData() }, queryParams.keyword: function() { this.queryParams.pageNum 1 this.fetchData() } }注意一个小细节每次筛选条件变化页码必须重置为1不然会出现“你筛了个新条件但还在第8页”这种诡异情况。图书详情页我加了一个数量选择器和“立即购买”“加入购物车”两个按钮。加入购物车走Vuex用state.cartList存储同时持久化到localStorage。这样用户刷新页面购物车数据也不会丢不用每次打开页面都重新请求接口。购物车结算页的逻辑要稍微复杂一些全选、单选、数量加减、价格实时汇总。价格汇总我放在computed里computed: { totalPrice() { return this.cartList .filter(item item.checked) .reduce((sum, item) sum item.price * item.quantity, 0) .toFixed(2) } }这样所有勾选状态变化、数量变化价格都会自动重新计算不用手动调用任何方法。3.3 Vue播放m3u8视频与打包布局问题热搜词里有个“Vue播放m3u8”虽然图书商城本身用不上直播流视频但我在做图书详情多媒体展示时正好遇到过类似的视频支持需求这里一并说一下。如果要在Vue里播放m3u8格式的视频流原生video标签是搞不定的需要用到video.js配合videojs-contrib-hls插件npm install video.js videojs-contrib-hls --save使用方式import videojs from video.js import video.js/dist/video-js.css mounted() { this.player videojs(this.$refs.videoPlayer, { sources: [{ src: this.videoUrl, type: application/x-mpegURL }] }) }, beforeDestroy() { if (this.player) { this.player.dispose() } }注意beforeDestroy里一定调dispose()释放播放器实例不然路由切换后播放器会残留内存溢出。还有一个经典坑是“Vue打包后布局异常”。开发环境跑得好好的npm run build出来部署到nginx上就样式错乱或者页面一片空白。排查思路就三步第一步看路径。Vue CLI默认的publicPath是/如果你的项目不是部署在域名根路径比如部署在http://xxx.com/bookstore/那所有静态资源都会404CSS和JS加载不出来。解决办法是vue.config.js里设置module.exports { publicPath: process.env.NODE_ENV production ? ./ : / }第二步看路由模式。如果用history模式刷新页面会出现404因为nginx找不到对应的资源路径。解决办法是nginx配置try_files $uri $uri/ /index.html;或者图省事直接用hash模式。第三步看缓存。某些浏览器或CDN会缓存旧的JS文件导致新老代码混用布局异常部署时文件名加哈希Vue CLI默认会加就能解决。3.4 前后端联调与Vuex状态管理实践联调阶段我一般在vue.config.js里配置开发代理解决跨域问题devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }这样前端请求/api/books时开发服务器会自动转发到后端的8080端口浏览器里看不到跨域报错。生产环境部署时我把前端build后的dist目录直接放到nginx的html目录下然后用nginx反向代理/api请求到后端服务。关于Vuex我主要维护了三个模块用户信息、购物车、订单相关状态。购物车的状态一定要设计好const state { cartList: JSON.parse(localStorage.getItem(cartList) || []) } const mutations { ADD_TO_CART(state, book) { const existing state.cartList.find(item item.id book.id) if (existing) { existing.quantity } else { state.cartList.push({ ...book, quantity: 1, checked: true }) } localStorage.setItem(cartList, JSON.stringify(state.cartList)) } }这里的核心思想是Vuex只负责内存状态localStorage负责持久化。每次操作购物车时同步写localStorage刷新后重新读取。千万别为了省事直接在组件里操作localStorage不然跨组件同步状态会非常痛苦。4. 项目环境配置、部署与安全性加固4.1 环境准备MySQL安装配置与IDEA建项目先说MySQL。我第一次用MySQL 8.0的时候官网下载页那个“Windows (x86, 64-bit), ZIP Archive”就是免安装版下载后解压就能用但配置步骤比较讲究。免安装版的核心配置流程解压后在根目录建一个my.ini配置文件内容大致是[mysqld] basedirD:/mysql-8.0.32-winx64 datadirD:/mysql-8.0.32-winx64/data port3306 character-set-serverutf8mb4以管理员身份打开命令行切换到bin目录依次执行mysqld --initialize-insecure mysqld -install net start mysql--initialize-insecure的作用是初始化数据目录并创建一个root空密码账户方便第一次登录。安装版的话下一步下一步就行但要记住设置root密码的步骤开发环境密码建议别搞得太复杂root/123456这种方便联调生产环境再说加强的事情。在IDEA里创建Spring Boot项目我一般直接File - New - Project - Spring Initializr选好Spring Boot版本和依赖Web、MyBatis、MySQL Driver、Lombok生成后再手动引入PageHelper。这里有个真实存在的大坑如果你选择的Spring Boot版本太高比如3.x那MyBatis依赖要下载专门适配新版本Packaging的包而且JDK版本必须17以上。所以我个人强烈建议学习阶段就用Spring Boot 2.7.x JDK 8/11这套版本组合是经过大量项目验证的网上绝大部分教程的代码都能直接跑。4.2 项目安全设计密码加密、JWT认证与权限拦截学生项目和初级项目最容易忽略安全这个问题。但图书商城这种涉及用户支付信息哪怕只是模拟支付的系统安全设计不能完全不考虑。我做了三层防护第一层是用户密码存储。注册时用BCryptPasswordEncoder加密再入库登录时用它自带的matches方法验证。BCrypt的好处是自动加盐而且即使两个用户密码相同加密后的密文也不同就算数据库泄露攻击者用彩虹表也破解不了。第二层是登录状态管理。我用的是JWTJSON Web Token用户登录成功后后端生成一个带过期时间的token返回给前端前端存localStorage每次请求在请求头带上。后端写个拦截器统一校验Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 放行登录接口和预检请求 if (request.getMethod().equals(OPTIONS)) return true; if (request.getRequestURI().contains(/login)) return true; String token request.getHeader(Authorization); if (token null || !JwtUtil.verify(token)) { response.setStatus(401); return false; } return true; } }第三层是接口权限控制。管理端接口/api/admin/**除了要登录还必须要求用户的角色是管理员。我在JWT里存了role字段拦截器里再取出来判断一下角色不符返回403。这样从制度上防止普通用户调管理接口。4.3 项目打包部署与常见环境问题打包部署是很多人的噩梦但按步骤来其实不难。后端打包在项目根目录执行mvn clean package -DskipTests会生成一个target/xxx.jar。然后服务器上或者本机测试环境执行java -jar bookstore.jar --spring.profiles.activeprod外置配置我用application-prod.yml里面配生产环境的数据库连接密码通过环境变量注入不写死在配置文件里。前端部署npm run build生成dist目录把dist内容丢到nginx的html目录然后nginx配置大致是server { listen 80; server_name yourdomain.com; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }一个运维上的细节如果proxy_pass后面带路径比如http://127.0.0.1:8080/那么nginx会把/api/books转发为/books如果不带斜杠就保持/api/books原样转发。我用的是第二种后端Controller的RequestMapping(/api/books)不用改。部署完记得花点时间测三个点直接访问域名首页、搜索功能能正常返回、点击下单按钮时前端能正确跳转。这两个通了系统基本就没啥大问题了。5. 常见问题排查与项目经验总结5.1 高频Bug排查实录把我在开发中真实遇到的问题列一个速查表方便你对照排查问题现象根本原因解决办法MySQL提示Access denied for user rootlocalhost密码错误或者root用户不允许远程登录本机登录重置密码远程连接执行ALTER USER root% IDENTIFIED WITH mysql_native_password BY password老版本Navicat连不上MySQL 8.08.0默认用了caching_sha2_password插件老客户端不支持修改用户认证插件为mysql_native_passwordSpring Boot启动报Failed to configure a DataSource没有配置数据库连接或者mybatis依赖加载不到application.yml里检查spring.datasource配置MyBatis查询返回字段全是null实体类属性名和数据库列名映射不上开启map-underscore-to-camel-case: true或在SQL里给每列起别名跨域报错No Access-Control-Allow-Origin header开发环境下前端地址和后端端口不一致后端配置CORS过滤器或前端用proxy代理解决前端npm install卡住或报错默认registry访问慢或依赖版本冲突用国内镜像源registry.npmmirror.com或检查npm版本Vue打包后页面白屏publicPath配置不对资源路径404vue.config.js里设publicPath: ./其中MyBatis字段映射问题出现的频率最高因为Java实体类通常用驼峰命名discountPrice数据库列名用下划线discount_price不配置mapUnderscoreToCamelCase的话查询结果就是null。新手排查这个问题最容易懵——SQL语句单独在Navicat里跑没问题但程序查出来就是空值。5.2 系统维护与后续扩展建议系统上线跑起来之后别以为就完事儿了。我觉得有两件事值得花时间做。第一件是记录SQL慢查询日志。在MySQL里执行SET GLOBAL slow_query_log ON;然后mysqld --slow-query-log配置里设置慢查询阈值long_query_time2一段时间后去分析慢日志看哪些查询需要索引优化。我在这个项目里就发现订单列表查询在数据量大时变慢加了idx_user_id索引后情况立刻好转。第二件是关注系统的东西而不是技术细节。图书电商能做深的方向太多了接入真实的支付接口支付宝、微信支付、引入Redis做热门图书的缓存、用Elasticsearch做全文搜索、增加推荐算法“猜你喜欢”、对接物流系统查询快递轨迹。每一个方向都是可以单独做成一个项目拿出来讲的。对于正在做毕业设计的同学我的建议是先保证核心功能完整跑通再选一个方向做出亮点。最怕的是系统做了十来个功能但每个都半吊子不如把订单支付库存扣减这一条链路做得严丝合缝再额外加一个亮点功能答辩时更有底气。5.3 写在最后我对这套技术栈的体会做完这个图书电商系统我最深的体会是Spring Boot Vue这套技术栈之所以被大量项目选用不是因为哪个单独的组件有多神而是它们组合在一起之后把开发者的注意力从“环境的坑”和“配置的坑”里解放出来集中到业务逻辑本身。MySQL存数据MyBatis管查询Spring Boot管接口Vue管交互各司其职出了问题定位也很快。整个过程里我踩过不少坑但回头看最花时间的往往不是高深的技术难点而是环境版本匹配、编码格式不对、字段映射不上这类“小事”。所以建议跟着做的朋友遇到异常不要慌先把报错信息完整读一遍再对照日志定位大部分问题都能在20分钟内解决。如果卡住了也别硬扛搜一搜错误信息里最重要的那句英文基本上都有前人踩过坑的记录。最后再分享一个小技巧图书封面图片上传、首页轮播这些都是项目的加分项但实现起来要注意文件名重复问题。我用的办法是用UUID.randomUUID()加原文件后缀重新命名存到服务器本地磁盘数据库里只存相对路径。这样既避免了同名覆盖也方便后续迁移到OSS云存储。你做完这个项目如果还有余力优先把图片存储这块换成OSS简历上会更有竞争力。