SpringBoot開(kāi)發(fā)Web應(yīng)用

在學(xué)習(xí)框架之前曾用 html+js、ajax + servlet + jdbc 搭建過(guò)一個(gè)完整的Web應(yīng)用：?jiǎn)T工信息管理系統(tǒng)，源碼已上傳至個(gè)人Github：https://github.com/zhaozsh/EmployeeManagement，今天嘗試用SpirngBoot 短時(shí)間內(nèi)引用原項(xiàng)目快速開(kāi)發(fā)基于SSM框架的員工信息管理平臺(tái)，沿用原數(shù)據(jù)庫(kù)（表t_user、表t_employee）。
1.項(xiàng)目搭建：
使用 Spring Tool Suite 工具創(chuàng)建 Spring Starter Project ，Starter依賴(lài)引入 Web、MySQL、MyBatis，創(chuàng)建controller、service、dao、entity包，創(chuàng)建EmpMapper.xml、UserMapper.xml 作為 MyBatis 的映射文件。
項(xiàng)目結(jié)構(gòu)如下：

圖片.png

2.代碼部分，這里先貼上最終完成的后端代碼，后面講一下所遇到的問(wèn)題及解決方案。
編寫(xiě) aplication.properties 配置文件：

#tomcat端口
server.port=8080
#數(shù)據(jù)連接
spring.datasource.url=jdbc:mysql://localhost:3306/test?useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driverClassName=com.mysql.jdbc.Driver
#Mybatis掃描
mybatis.mapper-locations=classpath*:mapper/*.xml
#起別名。可省略寫(xiě)mybatis的xml中的resultType的全路徑
mybatis.type-aliases-package=com.emp.entity

從最底層開(kāi)始展示代碼：
UserDao接口：

@Mapper
@Repository
public interface UserDao {

    public User login(Map<String, Object> map);
}

EmployeeDao接口：

@Mapper
@Repository
public interface EmployeeDao {

    public List<Employee> getEmployees();
    
    public int deleteEmployee(String id);

    public boolean addEmployee(Employee emp);

    public boolean editEmployee(Employee emp);
}

實(shí)現(xiàn)dao接口的 mapper.xml 如下UserMapper：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.emp.dao.UserDao" >
    <select id="login" parameterType="map" resultType="User">
        SELECT * FROM t_user WHERE username = #{username} and password = #{password}
    </select>
</mapper>

EmployeeMapper:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.emp.dao.EmployeeDao" >
    <select id="getEmployees" resultType="Employee">
        SELECT p_employee_id pid,name,sex,birthday,idcard,phone,address,photo FROM t_employee WHERE active=1
    </select>
    <update id="deleteEmployee" parameterType="String">
        UPDATE t_employee SET active=0 WHERE p_employee_id = #{id}
    </update>
    <insert id="addEmployee" parameterType="Employee">  
        INSERT INTO t_employee VALUES(null, #{name}, #{sex}, #{birthday}, #{idcard}, #{phone}, #{address}, #{photo},1)
    </insert> 
    <update id="editEmployee" parameterType="Employee">
        UPDATE t_employee SET name=#{name}, sex=#{sex}, birthday=#{birthday}, phone=#{phone}, address=#{address}, photo=#{photo} WHERE p_employee_id = #{pid}
    </update>
</mapper>

Service層代碼UserService：

@Service
public class UserService {

    @Autowired
    UserDao userDao;
    
    public boolean login(Map<String, Object> map) {
        boolean flag = false;
        User user=userDao.login(map);
        if(user!=null){
            flag = true;
        }
        return flag;
    }
}

EmployeeService:

@Service
public class EmployeeService {

    @Autowired
    EmployeeDao employeeDao;
    
    public List<Employee> getEmployees() {
        return employeeDao.getEmployees();
    }
    
    public int deleteEmployee(String id) {
        return employeeDao.deleteEmployee(id);
    }

    public boolean addEmployee(Employee emp) {
        return employeeDao.addEmployee(emp);
    }

    public boolean editEmployee(Employee emp) {
        return employeeDao.editEmployee(emp);
    }
}

controller控制層代碼UserController：

@Controller
@RequestMapping("/user/*")
public class UserController {

    @Autowired
    UserService userService;
    
    @Autowired
    HttpServletRequest request;
    
    @Autowired
    HttpServletResponse response;

    @RequestMapping("/login")
    public String login() throws Exception {
        
        String str;
        String username= request.getParameter("username");
        String password= request.getParameter("password");
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("username",username);
        map.put("password", password);
        if(userService.login(map)) {
            session.setAttribute("loginName", username);
            Cookie c1 = new Cookie("loginName", username);
            c1.setPath("/");
            response.addCookie(c1);
            str = "redirect:/main.html";
        }else {
            str = "redirect:/index.html";
        }
        return str;
    }
}

EmployeeController：

@RestController
@RequestMapping("/emp/*")
public class EmplyeeController {

    @Autowired
    EmployeeService employeeService;
    
    @RequestMapping("/search")
    public List<Employee> searchEmp() {
        List<Employee> list = employeeService.getEmployees();
        return list;
    }
    
    @RequestMapping("/addOrEdit")
    public String addOrEditEmp(HttpServletRequest request) throws Exception {
        String str = "error";
        Employee emp = new Employee();
        emp.setName(request.getParameter("name"));
        emp.setSex(Integer.parseInt(request.getParameter("sex")));
        emp.setBirthday(request.getParameter("birthday"));
        emp.setPhone(request.getParameter("phone"));
        emp.setAddress(request.getParameter("address"));
        // 設(shè)置存放員工證件照的路徑
        String path=request.getSession().getServletContext().getRealPath("/");
        File f = new File(path+"upload\\");
        if (!f.exists()) {// 若圖片保存路徑不存在則創(chuàng)建
            f.mkdir();
        }
        Part p=request.getPart("file");
        if(p.getContentType().contains("image")){
            ApplicationPart ap= (ApplicationPart) p;
            String fname=ap.getSubmittedFileName();
            p.write(path+"upload\\"+fname);
            emp.setPhoto("upload/"+fname);
        }
        
        String type = request.getParameter("type");
        if(type.equals("add")) {
            emp.setIdcard(request.getParameter("idcard"));
            if(employeeService.addEmployee(emp)) {
                str = "添加成功！";
            }else {
                str = "添加失?。?;
            }
        }else {
            emp.setPid(request.getParameter("pid"));
            if(employeeService.editEmployee(emp)) {
                str = "修改成功！";
            }else {
                str = "修改失??！";
            }
        }
        
        return str;
    }
    
    @RequestMapping("/delete")
    public String deleteEmp(HttpServletRequest request) {
        String pid = request.getParameter("pid");
        String str = "無(wú)法找到該記錄";
        int i = employeeService.deleteEmployee(pid);
        if(i>0) {
            str = "success";
        }
        System.out.println(str);
        return str;
    }
}

后端代碼到此基本全部寫(xiě)完，前端頁(yè)面直接復(fù)制原項(xiàng)目的 html 和 js 放在項(xiàng)目根目錄的static 文件夾下，不過(guò)js需要修改調(diào)用的url，其中登陸頁(yè)面的登陸方法改為：action="user/login"，主頁(yè)面的 js 、ajax方法調(diào)用的url需要修改為新項(xiàng)目的 url，至此整個(gè)項(xiàng)目的功能完全拷貝到了SSM框架下。源碼上傳至Github：https://github.com/zhaozsh/employee_ssm

3.遇到的問(wèn)題及解決辦法：

第一個(gè)問(wèn)題：springboot所創(chuàng)建的maven項(xiàng)目沒(méi)有WebContent或者WebRoot文件夾，頁(yè)面以及靜態(tài)文件在哪編寫(xiě)以及如何調(diào)用的問(wèn)題。
解決辦法：springboot項(xiàng)目里有static及templates文件夾，springboot默認(rèn) static 中放靜態(tài)頁(yè)面，而templates 中放動(dòng)態(tài)頁(yè)面，直接在static 文件夾下放一個(gè)XXX.html，然后瀏覽器里直接輸入localhost:8080/XXX.html便能成功訪(fǎng)問(wèn)。也可以通過(guò)controller跳轉(zhuǎn)：return "XXX.html"; 若使用了Thymeleaf組件，則會(huì)自動(dòng)去templates文件夾尋找文件，要想跳轉(zhuǎn)至static下的頁(yè)面可以修改controller如下：return "redirect:XXX.html";

第二個(gè)問(wèn)題：寫(xiě)實(shí)體類(lèi)若某屬性與數(shù)據(jù)庫(kù)中表字段不一致，導(dǎo)致查詢(xún)不出該字段。
解決辦法：可以在resultMap中指定表列名與實(shí)體類(lèi)屬性間的對(duì)應(yīng)關(guān)系 或者最簡(jiǎn)單的使用別名（p_employee_id是數(shù)據(jù)庫(kù)字段，pid是類(lèi)屬性）：


圖片.png

第三個(gè)問(wèn)題：controller中沒(méi)有servlet自帶request、response，如何接受頁(yè)面?zhèn)鬟f過(guò)來(lái)的參數(shù)以及如何輸出數(shù)據(jù)。
解決辦法：可以在controller中使用@Autowired注解自動(dòng)裝配HttpServletRequest request; 或者在方法參數(shù)中寫(xiě)入HttpServletRequest request，即可使用request對(duì)象讀取參數(shù)。在RestController中不返回頁(yè)面，可以直接返回?cái)?shù)據(jù)不需要response。

第四個(gè)問(wèn)題：使用Cookie存放用戶(hù)名展示登陸歡迎信息，前端js無(wú)法獲取。
解決辦法：在UserController里我們?cè)O(shè)置了@RequestMapping("/user/*")，使用response.addCookie(c);默認(rèn)將Cookie存放至/user路徑下，而前端js使用document.cookie則默認(rèn)在項(xiàng)目根目錄/下查找cookie，結(jié)果當(dāng)然是查找不，這里在controller里使用cookie.setPath("/");將路徑改為根目錄即可。

下一個(gè)問(wèn)題：更新中...

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容