在创建好的web工程后，要在pom.xml文件中导入工程所需的依赖或者插件，代码基本如下内联代码片。 < dependencies>
< dependency>
< groupId> org. mybatis< / groupId>
< artifactId> mybatis< / artifactId>
< version> 3.5 .5 < / version>
< / dependency>
< dependency>
< groupId> mysql< / groupId>
< artifactId> mysql- connector- java< / artifactId>
< version> 5.1 .46 < / version>
< / dependency>
< dependency>
< groupId> javax. servlet< / groupId>
< artifactId> javax. servlet- api< / artifactId>
< version> 3.1 .0 < / version>
< scope> provided< / scope>
< / dependency>
< dependency>
< groupId> com. alibaba< / groupId>
< artifactId> fastjson< / artifactId>
< version> 1.2 .62 < / version>
< / dependency>
< / dependencies>
< build>
< plugins>
< plugin>
< groupId> org. apache. tomcat. maven< / groupId>
< artifactId> tomcat7- maven- plugin< / artifactId>
< version> 2.2 < / version>
< / plugin>
< / plugins>
< / build>
在mybatis-config.xml文件中配置所要连接的MySql数据库,代码基本如下 < ? xml version= "1.0" encoding= "UTF-8" ? >
< ! DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd" >
< configuration>
< typeAliases>
< package name= "com.itheima.pojo" / >
< / typeAliases>
< environments default = "development" >
< environment id= "development" >
< transactionManager type= "JDBC" / >
< dataSource type= "POOLED" >
< property name= "driver" value= "com.mysql.jdbc.Driver" / >
< property name= "url" value= "jdbc:mysql:///db1?useSSL=false" / >
< property name= "username" value= "root" / >
< property name= "password" value= "1234" / >
< / dataSource>
< / environment>
< / environments>
< mappers>
< package name= "com.itheima.mapper" / >
< / mappers>
< / configuration>
先创建mapper接口和对应的.xml映射文件 在mapper接口中写方法，每个方法在mapper对应的.xml文件中都有对应的sql语句，简单的sql语句可以直接在方法上面使用注解的方式写，例如下面代码 @Insert ( "insert into tb_brand values (null,#{brandName},#{companyName},#{ordered},#{description},#{status})" )
void add ( Brand brand) ;
@Select ( "select * from tb_brand" )
@ResultMap ( "brandResultMap" )
List< Brand> selectAll ( ) ;
如果参数中的字段和需要输出的数据库中的列名不一致，就要在mapper对应的.xml文件中写映射关系，如下代码 < resultMap id= "brandResultMap" type= "brand" >
< result property= "brandName" column= "brand_name" / >
< result property= "companyName" column= "company_name" / >
< / resultMap>
若sql语句叫复杂，则写在mapper对应的.xml文件中,比如需要用到动态sql时
< select id= "selectByPageAndCondition" resultMap= "brandResultMap" >
select *
from tb_brand
< where>
< if test= "brand.brandName!=null and brand.brandName!=''" >
and brand_name like #{ brand. brandName}
< / if >
< if test= "brand.companyName!=null and brand.companyName!=''" >
and company_name like #{ brand. companyName}
< / if >
< if test= "brand.status!=null" >
and status= #{ brand. status}
< / if >
< / where>
limit #{ begin} , #{ size}
< / select>
创建一个类，该类用于实现mapper接口中的所有方法（不用implements这个mapper接口） 在该类内的开始位置先写以下三行代码（该三行是mybatis官网提供的），这样子可以避免在每个方法中重复生成工厂sqlSessionFactory浪费资源 String resource = "mybatis-config.xml" ;
InputStream inputStream = Resources. getResourceAsStream ( resource) ;
sqlSessionFactory = new SqlSessionFactoryBuilder ( ) . build ( inputStream) ;
public void add ( Brand brand) {
SqlSession sqlSession = sqlSessionFactory. openSession ( ) ;
BrandMapper mapper = sqlSession. getMapper ( BrandMapper. class ) ;
mapper. add ( brand) ;
sqlSession. commit ( ) ;
sqlSession. close ( ) ;
}
更为便捷的通用方法是直接通过方法名访问servlet资源 首先创建一个BaseServlet类，并且继承HttpServlet，该类是通用的，复制即可直接用，代码如下
public class BaseServlet extends HttpServlet {
@Override
protected void service ( HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String uri = req. getRequestURI ( ) ;
int index= uri. lastIndexOf ( '/' ) ;
String methodName = uri. substring ( index + 1 ) ;
Class< ? extends BaseServlet > acl = this . getClass ( ) ;
try {
Method method = acl. getMethod ( methodName, HttpServletRequest. class , HttpServletResponse. class ) ;
method. invoke ( this , req, resp) ;
} catch ( NoSuchMethodException e) {
e. printStackTrace ( ) ;
} catch ( IllegalAccessException e) {
e. printStackTrace ( ) ;
} catch ( InvocationTargetException e) {
e. printStackTrace ( ) ;
}
}
}
为不同的资源创建类，该类中的方法名即为该方法的访问路径，如下以BrandServlet为例，方法同样以add为例 @WebServlet ( "/brand/*" )
public class BrandServlet extends BaseServlet {
/ / 创建service对象
private BrandService brandService= new BrandServiceImp ( ) ;
public void add ( HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
/ / 接收品牌数据-- 前端是以post方式发起请求时接收data段的数据的方法
BufferedReader reader = request. getReader ( ) ;
String s = reader. readLine ( ) ; / / 获取json数据
Brand brand = JSON . parseObject ( s, Brand. class ) ;
brandService. add ( brand) ;
response. getWriter ( ) . write ( "success" ) ;
}
}
要使用Vue和element组件库前，要先导入相关资源文件，放在webapp目录下，以下是我的目录，element-ui和js文件夹都是导入的，之后要使用直接网上复制粘贴即可 创建一个html文件，在body底部先引入资源，代码如下 < script src= "js/vue.js" > < / script>
< script src= "element-ui/lib/index.js" > < / script>
< link rel= "stylesheet" href= "element-ui/lib/theme-chalk/index.css" >
< script src= "js/axios-0.18.0.js" > < / script>
< script>
new Vue ( {
el: "app" ,
mounted ( ) {
} ,
methods: {
} ,
data ( ) {
return {
}
}
} )
< / script>
以添加商品为例子，前端展示如下 前端代码如下 < ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> Title< / title>
< style>
. el- table . warning- row {
background: oldlace;
}
. el- table . success- row {
background: #f0f9eb;
}
< / style>
< / head>
< body>
< div id= "app" >
< ! -- 添加数据对话框表单-- >
< el- dialog
title= "编辑品牌"
: visible. sync= "dialogVisible"
width= "30%" >
< el- form ref= "form" : model= "brand" label- width= "80px" >
< el- form- item label= "品牌名称" >
< el- input v- model= "brand.brandName" > < / el- input>
< / el- form- item>
< el- form- item label= "企业名称" >
< el- input v- model= "brand.companyName" > < / el- input>
< / el- form- item>
< el- form- item label= "排序" >
< el- input v- model= "brand.ordered" > < / el- input>
< / el- form- item>
< el- form- item label= "备注" >
< el- input type= "textarea" v- model= "brand.description" > < / el- input>
< / el- form- item>
< el- form- item label= "状态" >
< el- switch v- model= "brand.status"
active- value= "1"
inactive- value= "0"
> < / el- switch >
< / el- form- item>
< el- form- item>
< el- button type= "primary" @click= "addBrand" > 提交< / el- button>
< el- button @click= "dialogVisible = false" > 取消< / el- button>
< / el- form- item>
< / el- form>
< / el- dialog>
< / div>
< script src= "js/vue.js" > < / script>
< script src= "element-ui/lib/index.js" > < / script>
< link rel= "stylesheet" href= "element-ui/lib/theme-chalk/index.css" >
< script src= "js/axios-0.18.0.js" > < / script>
< script>
new Vue ( {
el: "#app" ,
mounted ( ) {
this . selectAll ( ) ;
} ,
methods: {
selectAll ( ) {
axios ( {
method: "post" ,
url: "http://localhost:8080/brand-case2/brand/selectByPageAndCondition?currentPage=" + this . currentPage+ "&pageSize=" + this . pageSize,
data: this . brand1
} ) . then ( response=> {
} )
} ,
addBrand ( ) {
var _this= this ;
axios ( {
method: "post" ,
url: "http://localhost:8080/brand-case2/brand/add" ,
data: _this. brand
} ) . then ( function ( response) {
if ( response. data == "success" ) {
_this. dialogVisible = false ;
_this. selectAll ( ) ;
_this. $message ( {
showClose: true ,
message: '添加成功！' ,
type: 'success'
} ) ;
}
} )
}
} ,
data ( ) {
return {
dialogVisible: false ,
brand: {
status: '' ,
brandName: '' ,
companyName: '' ,
id: "" ,
ordered: "" ,
description: ""
} ,
brand1: {
status: '' ,
brandName: '' ,
companyName: '' ,
id: "" ,
ordered: "" ,
description: ""
}
}
}
} )
< / script>
< / body>
< / html>
1528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
