ssh+angularjs的增删改查（CRUD）

由于网上的涉及到angulajs与java后台交互的代码太少了大都使用了maven，我们这边使用不了maven，且maven对初学者很不友好，我从网上查了很多都没找到一个合适的demo 只好自己写了，刚好贡献出来与大家分享一下我的学习（实际上并没有学习，我是直接百度 angulajs 如何双向绑定的）

布局如下

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <!-- 配置前端控制器 -->
        <servlet>
            <servlet-name>springMVC</servlet-name>
            <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
            
            <init-param>
                <param-name>contextConfigLocation</param-name>
                <param-value>classpath:springMVC.xml</param-value>
            </init-param>
            
            <load-on-startup>1</load-on-startup>
        </servlet>

        <servlet-mapping>
            <servlet-name>springMVC</servlet-name>
            <url-pattern>*.form</url-pattern>
        </servlet-mapping>
</web-app>

Springmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context"
     xmlns:aop="http://www.springframework.org/schema/aop"
     xmlns:tx="http://www.springframework.org/schema/tx"
     xmlns:mvc="http://www.springframework.org/schema/mvc"
     xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd">
        
        <!-- 加载注解 -->
     	<context:annotation-config/>

        <!-- 配置spring容器扫描注解 -->
		<context:component-scan base-package="com.pfss" />
		
        <!-- 默认的注解映射的支持  等同于配配置了两个bean，一个是映射处理器，适配器   -->
	    <mvc:annotation-driven />  
	   
	    <!-- 启动自动代理 -->
	    <aop:aspectj-autoproxy />
	    
	 	<!-- 启动事物的注解驱动 -->
	 	<tx:annotation-driven/>
	 	
	 	<!-- 配置数据源 -->
	 	<!-- 数据源 -->
		 <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
	    	<property name="driverClass" value="com.mysql.jdbc.Driver"/>
	        <property name="jdbcUrl" value="jdbc:mysql://localhost:3306/mysql0704"/>
	        <property name="user" value="root"/>
	        <property name="password" value="root"/>
	    </bean>
	    
	    <!-- sessionFactory 会话工厂 -->
		 <bean id="sessionFactory" class="org.springframework.orm.hibernate4.LocalSessionFactoryBean">
	    	<property name="dataSource" ref="dataSource" />
	    	
	    	<property name="packagesToScan">
	            <list>
	                <value>com.pfss.pojo</value>
	            </list>
	        </property>
	        <property name="hibernateProperties">
	            <value>
	                hibernate.dialect=org.hibernate.dialect.MySQLDialect
	                hibernate.show_sql=true
	                hibernate.format_sql=true
	                hibernate.hbm2ddl.auto=update
	            </value>
	        </property>
	    </bean>
	    
	 	<!-- 事务管理器 -->
	    <bean id="txManager" class="org.springframework.orm.hibernate4.HibernateTransactionManager">
	    	<property name="sessionFactory" ref="sessionFactory" />
	    </bean>
	    
	    <!-- 视图解析器 -->
		<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
			<property name="prefix" value="/jsp/"/>
			<property name="suffix" value=".jsp"/>
	    </bean> 
	    
	    <!-- 上传组件 -->
	    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		     <property name="maxUploadSize" value="1048500" />
		     <property name="maxInMemorySize" value="10096" />
		     <property name="defaultEncoding" value="UTF-8"></property>
		</bean>
		  
</beans>

User实体

package com.pfss.pojo;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

/**
 * 创建User实体
 * @author gmy
 * TIME : 2018年6月26日
 */

@Entity
@Table(name="TAB_USER")
public class User {

    //用户Id
    private Integer userId;
    
    //用户名
    private String username;
    
    //用户密码
    private String password;
    
    //getter setter方法
    @Id
    @GeneratedValue
    public Integer getUserId() {
        return userId;
    }
    public void setUserId(Integer userId) {
        this.userId = userId;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
  
    /**
     * @author gmy
     * TIME : 2018年6月26日
     */
    @Override
    public String toString() {
        return "User [userId=" + userId + ", username=" + username + ", password=" + password
                + "]";
    }
    
    /**
     * 无参构造
     * @author gmy
     * TIME : 2018年6月26日
     */
    public User() {
        super();
        // TODO Auto-generated constructor stub
    }
    
    /**
     * 有参构造
     * @author gmy
     * TIME : 2018年6月26日
     * @param username 用户名
     * @param password 用户密码
     * @param userType 用户状态
     */
    public User(String username, String password) {
        super();
        this.username = username;
        this.password = password;
    }
    
}

Dao层

package com.pfss.dao;

import java.util.List;

import com.pfss.pojo.User;

/**
 * User实体数据库交互层
 * @author gmy
 * TIME : 2018年6月26日
 */
public interface IUserDao {

    /**
     * 获得全部User
     * @author gmy
     * TIME : 2018年6月26日
     */
    List<User> listUser();
    
    /**
     * 获取单个User
     * @author gmy
     * TIME : 2018年6月26日
     * @param userId 用户Id
     * @return
     */
    User getUser(int userId);
    
    /**
     * 按用户名字查用户
     * @author gmy
     * TIME : 2018年6月26日
     * @param uname 用户名
     * @return
     */
    User queryUserByName(String uname);
    
    /**
     * 新增User
     * @author gmy
     * TIME : 2018年6月26日
     * @param user 用户实体
     */
    void insertUser(User user);
    
    
    /**
     * 删除用户
     * @author gmy
     * TIME : 2018年6月26日
     * @param userId 用户Id
     */
    void deleteUser(String userId);
    
    /**
     * 更新用户数据
     * @author gmy
     * TIME : 2018年6月26日
     * @param user 用户实体
     */
    void updateUser(User user);
    
    
}

daoimpl

package com.pfss.dao.impl;

import java.util.List;

import javax.annotation.Resource;

import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.springframework.stereotype.Repository;

import com.pfss.dao.IUserDao;
import com.pfss.pojo.User;

/**
 * User实体数据库交互实现层
 * @author gmy
 * TIME : 2018年6月26日
 */
@Repository("userDao")
public class IUserDaoImpl implements IUserDao{

    SessionFactory sessionFactory;
    
    /**
     * 获得User集合
     * @author gmy
     * TIME : 2018年6月26日
     */
    @SuppressWarnings({ "unused", "unchecked" })
    @Override
    public List<User> listUser() {
        // TODO Auto-generated method stub
        String hql = " from User ";
        Query query = sessionFactory.getCurrentSession().createQuery(hql);
        List<User> listUser = query.list();
        return listUser;
    }

    /**
     * 获得单个User
     * @author gmy
     * TIME : 2018年6月26日
     */
    @Override
    public User getUser(int userId) {
        // TODO Auto-generated method stub
        return (User) this.sessionFactory.getCurrentSession().get(User.class, userId);
    }
    
    /**
     * 按用户名字查用户
     * @author gmy
     * TIME : 2018年6月26日
     * @param uname 用户名
     * @return
     */
    @Override
    public User queryUserByName(String uname) {
        // TODO Auto-generated method stub
        Session session = this.sessionFactory.getCurrentSession();
        User user = (User) session.createQuery("from User u where 1=1 and u.username = :uname")
                                  .setString("uname", uname)
                                  .uniqueResult();
        return user;
    }

    /**
     * 新增User
     * @author gmy
     * TIME : 2018年6月26日
     */
    @Override
    public void insertUser(User user) {
        // TODO Auto-generated method stub
        this.sessionFactory.getCurrentSession().saveOrUpdate(user);
    }

    /**
     * 删除User
     * @author gmy
     * TIME : 2018年6月26日
     */
    @Override
    public void deleteUser(String userId) {
        // TODO Auto-generated method stub
        this.sessionFactory.getCurrentSession().delete(this.getUser(Integer.parseInt(userId)));
        
    }

    /**
     * 修改User
     * @author gmy
     * TIME : 2018年6月26日
     */
    @Override
    public void updateUser(User user) {
        // TODO Auto-generated method stub
        this.sessionFactory.getCurrentSession().saveOrUpdate(user);
    }
    
    @Resource(name="sessionFactory")
    public void setSessionFactory(SessionFactory sessionFactory) {
        this.sessionFactory = sessionFactory;
    }

}

Service业务层

package com.pfss.service;

import java.util.List;

import com.pfss.pojo.User;

/**
 * User实体业务层
 * @author gmy
 * TIME : 2018年6月26日
 */
public interface IUserService {

    /**
     * 获得全部User
     * @author gmy
     * TIME : 2018年6月26日
     */
    List<User> listUser();
    
    /**
     * 获取单个User
     * @author gmy
     * TIME : 2018年6月26日
     * @param userId 用户Id
     * @return
     */
    User getUser(int userId);
    
    /**
     * 按用户名获取用户信息
     * @author gmy
     * TIME : 2018年6月26日
     * @param uname 用户名
     * @return
     */
    User queryUserByName(String uname);
    
    /**
     * 新增User
     * @author gmy
     * TIME : 2018年6月26日
     * @param user 用户实体
     */
    void saveUser(User user);
    
    
    /**
     * 删除用户
     * @author gmy
     * TIME : 2018年6月26日
     * @param userId 用户Id
     */
    void removeUser(String userId);
    
    /**
     * 更新用户数据
     * @author gmy
     * TIME : 2018年6月26日
     * @param user 用户实体
     */
    void modifyUser(User user);
}

ServiceImpl层

package com.pfss.service.impl;

import java.util.List;

import javax.annotation.Resource;
import javax.persistence.Transient;

import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.pfss.dao.IUserDao;
import com.pfss.pojo.User;
import com.pfss.service.IUserService;

/**
 * User实体业务实现层
 * @author gmy
 * TIME : 2018年6月26日
 */

@Service("userService")
@Transactional("txManager")
public class IUserServiceImpl implements IUserService {

    IUserDao userDao;
    
    /**
     * 获得全部User
     * @author gmy
     * TIME : 2018年6月26日
     */
    @Override
    public List<User> listUser() {
        // TODO Auto-generated method stub
        return this.userDao.listUser();
    }

    /**
     * 获取单个User
     * @author gmy
     * TIME : 2018年6月26日
     * @param userId 用户Id
     * @return
     */
    @Override
    public User getUser(int userId) {
        // TODO Auto-generated method stub
        return this.userDao.getUser(userId);
    }

    /**
     * 按用户名获取用户信息
     * @author gmy
     * TIME : 2018年6月26日
     * @param uname 用户名
     * @return
     */
    @Override
    public User queryUserByName(String uname) {
        // TODO Auto-generated method stub
        return this.userDao.queryUserByName(uname);
    }
    
    /**
     * 新增User
     * @author gmy
     * TIME : 2018年6月26日
     * @param user 用户实体
     */
    @Override
    public void saveUser(User user) {
        // TODO Auto-generated method stub
        this.userDao.insertUser(user);
    }

    /**
     * 删除用户
     * @author gmy
     * TIME : 2018年6月26日
     * @param userId 用户Id
     */
    @Override
    public void removeUser(String userId) {
        // TODO Auto-generated method stub
        this.userDao.deleteUser(userId);
    }
    
    /**
     * 更新用户数据
     * @author gmy
     * TIME : 2018年6月26日
     * @param user 用户实体
     */
    @Override
    public void modifyUser(User user) {
        // TODO Auto-generated method stub
        this.userDao.updateUser(user);
    }
    
    @Resource(name="userDao")
    @Transient
    public void setAd(IUserDao userDao) {
        this.userDao = userDao;
    }

}

Controllter层

package com.pfss.action;

import java.util.List;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.pfss.pojo.User;
import com.pfss.service.IUserService;

/**
 * User的控制层 调用业务层实现与前台的交互
 * @author gmy
 * TIME : 2018年6月26日
 */
@Controller("userAction")
@RequestMapping("/user")
public class UserAction {

    IUserService userService ;
    
    /**
     * 获得全部的数据
     * @author gmy
     * TIME : 2018年6月28日
     * @param user
     * @return userList json数据
     */
    @ResponseBody
    @RequestMapping(value="/listUser")
    public String listUser(User user){
       
        List<User> listUsers = this.userService.listUser();
        String userList = JSON.toJSONString(listUsers);
        
        //拼接json
        userList = "{"+'"'+"userList"+'"'+":"+userList+'}';
        return userList;
    }
    
    /**
     * 登录页面
     * @author gmy
     * TIME : 2018年6月28日
     * @param user
     * @return
     */
    @SuppressWarnings("unused")
    @RequestMapping(value="/login", method=RequestMethod.POST)
    public String getUser(@RequestBody User user,Model model,HttpServletRequest request,HttpServletResponse resp){
    
        if(user != null){
            User usersql = userService.queryUserByName(user.getUsername());
            
            if(usersql != null){
                //用户存在
                if(usersql.getPassword().equals(user.getPassword())){
                    
                    System.out.print("success");
                    //重定向到jsp
                    
                    return "redirect:/jsp/success.jsp";
                    //return new ModelAndView("redirect:/success");
                   
                }else {
                    //密码不正确
                    System.out.print("password error");
                    return "redirect:/jsp/error.jsp";
                }
            }
        }else {
            //密码不正确
            System.out.print("用户不存在");
            return null;
        }
        return null;
        
    }
    
    /**
     * 添加用户
     * @author gmy
     * TIME : 2018年6月28日
     * @param imgHead
     * @param user
     * @param model
     * @param session
     * @return
     */
    @RequestMapping("/addUser")
    public String addUser(@RequestBody User user) {
  
        if(user != null){
            User u = new User();
            u.setUsername(user.getUsername());
            u.setPassword(user.getPassword());
            userService.saveUser(u);
            return "redirect:/jsp/listUser.jsp";
        }else{
            System.out.print("null!!!!");
        }
        return null;
        
    }
    
    /**
     * 删除用户 
     * @author gmy
     * TIME : 2018年6月28日
     * @param userId
     */
    @RequestMapping("/deleteUser")
    public String deleteUser(String userId) {
        this.userService.removeUser(userId);
        return "listUser";
    }
    
    /**
     * 通过点击update按钮跳转到jsp页面
     * @author gmy
     * TIME : 2018年6月28日
     * @param userId
     */
    @RequestMapping("/selectByuserId")
    public String selectByuserId(String userId,Model model) {
        System.out.println(userId);
        this.userService.getUser(Integer.parseInt(userId));
        model.addAttribute("userId", userId);
        return "updateUser";
    }
    
    
    /**
     * 更新用户
     * @author gmy
     * TIME : 2018年6月28日
     * @param user
     */
    @RequestMapping("/updateUser")
    public String updateUser(@RequestBody User user) {
        
        User u = userService.getUser(user.getUserId());
        u.setUsername(user.getUsername());
        u.setPassword(user.getPassword());
        userService.modifyUser(u);
        return "listUser";
    }
    
    @Resource(name="userService")
    public void setUs(IUserService userService) {
        this.userService = userService;
    }
}

相应的HTML如下：

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/angular-1.3.0.14/angular.js"></script>
<title>AngularJSTest</title>
</head>
<body ng-controller="MyController">
    <p>User</p>
    <p>ID:</p>
    <input id="userId" name="userId" ng-model="User.userId">
    <br>
    <p>Username:</p>
    <input id="username" name="username" ng-model="User.username">
    <br>
    <p>Password:</p>
    <input id="password" name="password" ng-model="User.password">
    <br>
    <button ng-click="getUser()">提交</button>
    <script>
   
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        function MyController($scope, $http){
           $scope.saveUser = {
                username:username,
                password:password
              
            };

            $scope.getUser = function(){
                $http({
                    method: "POST",
                    url: "http://localhost:8080/SshAngularJs/user/login.form",
                    data: $scope.saveUser
                }).success(function (data, status){
                    alert("success");
                    window.location.href='http://localhost:8080/SshAngularJs/jsp/listUser.jsp';
                })
            };
        }
   // }
    </script>
</body>
</html>

listUser.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<script src="../js/angular-1.3.0.14/angular.min.js"></script>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
 
<div ng-app="myApp" ng-controller="customersCtrl">
<a href="${pageContext.request.contextPath }/jsp/addUser.jsp">add</a>
<table>
    <tr>
    <th>userId</th>
    <th>username</th>
    <th>password</th>
    </tr>
  <tr ng-repeat="x in names">
  <td>{{ x.userId }}</td>
  <td>{{ x.username }}</td>
  <td>{{ x.password }}</td>  
  <!-- <td><button ng-click="midifyUser(x.userId)" type="button">update</button></td>-->
  <td><a href="${pageContext.request.contextPath }/user/selectByuserId.form?&userId={{ x.userId }}">修改</a></td>
  <td><button ng-click="deleteUser1($index)" type="button">delete1(js)</button></td>
  <td><button ng-click="deleteUser2(x.userId)" type="button">delete2(db)</button></td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
   $http.get("http://localhost:8080/SshAngularJs/user/listUser.form")
    .success(function (response) {
    	$scope.names = response.userList;
    });
   
   //从数据库中删除
   $scope.deleteUser2 = function(Id){  
	   var serId = Id;
	   var url = "http://localhost:8080/SshAngularJs/user/deleteUser.form";
	   $.ajax({
		    type:'POST',
	        url:url,
	        data:{
	            userId:serId,
	        },
	        success:function(result){
	        	
	        }
	   })
   }
   
   //该删除并非真正的删除，刷新后数据重新出现
   $scope.deleteUser1 = function(index){
       $scope.names.splice(index,1);     
   };  
   
    // 修改
   /*$scope.midifyUser = function(Id){  
       var serId = Id;
       var url = "http://localhost:8080/SshAngularJs/user/selectByuserId.form?&userId=${serId }";
       $.ajax({
            type:'get',
            url:url,
            data:{
                userId:serId,
            },
            success:function(result){
                
            }
       })
   }*/
    
   
 
});
</script>
</body>
</html>

addUser.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="">
<head>
<script type="text/javascript" src="../js/angular-1.3.0.14/angular.js"></script>
</head>
<body>
<body ng-controller="AddController">
    <p>User</p>
     <p>Username:</p>
    <input id="username" name="username" >
    <br>
    <p>Password:</p>
    <input id="password" name="password" >
    <br>
    <button ng-click="addUser()">提交</button>
    <script>

    function AddController($scope, $http){   
       $scope.addUser = function(){
    	    var username = document.getElementById("username").value;
    	    var password = document.getElementById("password").value;
           $http({
               method: "POST",
               url: "http://localhost:8080/SshAngularJs/user/addUser.form",
               data: {
            	   username:username,
            	   password:password
               }
           }).success(function (data){
               window.location.href="http://localhost:8080/SshAngularJs/jsp/listUser.jsp";
           })
       };
   }

    </script>
</body>
</html>

updateUser.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="">
<head>
<script type="text/javascript" src="../js/angular-1.3.0.14/angular.js"></script>
</head>
<body>
<body ng-controller="UpdateController">

    <input id="userId" name="userId" value="${userId}" hidden>
    <p>User</p>
     <p>Username:</p>
    <input id="username" name="username" >
    <br>
    <p>Password:</p>
    <input id="password" name="password" >
    <br>
    <button ng-click="updateUser()">更新</button>
    <script>

    function UpdateController($scope, $http){  
       $scope.updateUser = function(){
          
            var userId = document.getElementById("userId").value;
            //alert(userId)
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
           $http({
               method: "POST",
               url: "http://localhost:8080/SshAngularJs/user/updateUser.form",
               data: {
                    userId:userId,
                    username:username,
                    password:password
               }
           }).success(function (data, status){
               alert("success");
               window.location.href='http://localhost:8080/SshAngularJs/jsp/listUser.jsp';
           })
       };
   }

    </script>
</body>
</html>

具体的代码如上因为使用的是Hibernate 所以数据库它会自动创建，jar包的话别忘了 fastjson.jar

jar包如果缺的话：从我准备的这里下载一个，常用的jar包基本都有的（3个积分你买不了吃亏，买不了上当）

https://download.csdn.net/download/qq_15007327/10047838

ssh+angularjs的增删改查（CRUD）

猜你喜欢