angularJs前后台交互，简单实现

最新推荐文章于 2023-12-03 17:14:21 发布

mcxiaochi

最新推荐文章于 2023-12-03 17:14:21 发布

阅读量1.1k

点赞数 1

分类专栏：基础理论

本文链接：https://blog.csdn.net/weixin_42470710/article/details/87911255

版权

基础理论专栏收录该内容

89 篇文章 1 订阅

订阅专栏

前台代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularjs前后台交互</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>
<div ng-app="aaa" ng-controller="ccc">
    <table align="center" border="1px" cellpadding="0" cellspacing="0"
           style="width: 60%; height: 10%; text-align: center;">
        <thead>
        <td>id</td>
        <td>姓名</td>
        <td>密码</td>
        </thead>

        <tr ng-repeat="x in user">
        <td>{{ x.id }}</td>
        <td>{{ x.username }}</td>
        <td>{{ x.password }}</td>
        </tr>
    </table>



</div>
</body>
<script>
    var app=angular.module('aaa',[]);
    app.controller('ccc',function ($scope,$http) {
       /* $http({
            method: 'GET',
            url: 'http://localhost:8899/angular/user/find-by-all',
            /!*headers:{'Content-Type': 'application/json',
                "Access-Control-Allow-Origin": "*",
                'Accept': 'application/json'}*!/
        }).then(function successCallback(response) {
            // 请求成功执行代码

            $scope.user = response.data;
        }, function errorCallback(response) {

            debugger
            // 请求失败执行代码
            alert("请求失败")
        });*/
        $http.get("http://localhost:8899/angular/user/find-by-all").then( function (response) {
            $scope.user = response.data;
        })
    })
</script>
</html>

后台代码，仅供参考
controll层

package com.it.controll;

import com.it.entity.User;
import com.it.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.Date;
import java.util.List;

/**
 * @Author: machi
 * @Date:2019/2/22
 */
@Controller
@RequestMapping("/user")
public class UserController {
    private UserService userService;

    public UserController(UserService userService) {
        this.userService = userService;
    }

    @GetMapping("/find-by-all")
    @ResponseBody
    public List<User> findByAll() {
       /* List<User> list = userService.findByAll();
        for (User user : list) {
            System.out.println(user.getUsername());
        }*/
        return userService.findByAll();
    }


}

mapper层

package com.it.mapper;

import com.it.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

/**
 * @Author: machi
 * @Date:2019/2/21
 */
@Mapper
public interface UserMapper{
    /**
     *
     * @return
     */

    @Select("SELECT * from user")
    public List<User> findByAll();
}

serviceImpl层

package com.it.service.impl;

import com.it.entity.User;
import com.it.mapper.UserMapper;
import com.it.service.UserService;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @Author: machi
 * @Date:2019/2/21
 */
@Service
public class UserServiceImpl implements UserService {

    private UserMapper userMapper;

 public UserServiceImpl(UserMapper userMapper){

     this.userMapper=userMapper;
 }

    @Override
    public List<User> findByAll() {
        System.out.println(userMapper);
        return userMapper.findByAll();
    }


}

service层

package com.it.service;

import com.it.entity.User;

import java.util.List;

/**
 * @Author: machi
 * @Date:2019/2/21
 */

public interface UserService {
    /**
     *
     * @return
     */
    public List<User> findByAll();
}

实体层

package com.it.entity;


import javax.persistence.*;
import java.io.Serializable;


/**
 * @Author: machi
 * @Date:2019/2/21
 */
@Entity
@Table(name = "user")
public class User implements Serializable {

    @GeneratedValue(strategy = GenerationType.AUTO)//主键生成策略
    @Id
    private int id;
    @Column(name = "username")
    private String username;
    @Column(name = "password")
    private String password;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    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;
    }
}

application.yml 文件


server:
  port: 8081
  servlet:
    context-path: /angular
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/test
    driver-class-name: com.mysql.jdbc.Driver
    username: root
    password: root

静态页面一般就用nginx代理。

mcxiaochi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
angularJs前后台交互，简单实现

前台代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;angularjs前后台交互&lt;/title&gt; &lt;script src="https://cdn.stati
复制链接

扫一扫