JS二级联动(级部)（班级）

最新推荐文章于 2022-04-29 17:22:35 发布

万幸得以相识_

最新推荐文章于 2022-04-29 17:22:35 发布

阅读量468

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/L_888888/article/details/107080085

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Mysql数据库
cname(班级表)
在这里插入图片描述
grade（级部表）

person

vue页面

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="app">
    <form>
        <table border="1" align="center">
        <tr>
            <td>手机号：</td>
            <td><input type="number" v-model="persons.phone" id="phone"><span id="error"></span></td>
        </tr>
        <tr>
            <td>姓名：</td>
            <td><input type="text" v-model="persons.name"></td>
        </tr>
        <tr>
            <td>级部：</td>
            <td>
            <select v-model="persons.gid" v-on:change="doCheckCname()">
            <option value="0">--请选择级部--</option>
            <option v-for="gname in grade" :value="gname.ggid">{{gname.gname}}</option>
            </select>
            </td>
        </tr>
        <tr>
        <td>班级：</td>
        <td>
        <select v-model="persons.cid">
            <option value="0">--请选择班级--</option>
            <option v-for="cla in cla" :value="cla.ccid">{{cla.cname}}</option>
        </select>
        </td>
        </tr>
        <tr>
        <td>性别：</td>
        <td><input type="radio" value="男" v-model="persons.sex">男
        <input type="radio" value="女" v-model="persons.sex">女</td>
        </tr>
        <tr>
        <td>爱好：</td>
        <td>篮球<input type="checkbox" value="篮球" v-model="hobbys">	&nbsp;&nbsp;足球<input type="checkbox" value="足球"  v-model="hobbys">&nbsp;&nbsp;排球<input type="checkbox" value="排球"  v-model="hobbys"></td>
        </tr>
        <tr>
            <td>简介：</td>
            <td><textarea rows="10" cols="20" v-model="persons.code"></textarea></td>
        </tr>
        <tr>
            <td><input type="button" name="submit" value="保存" v-on:click="doAdd()"></td>
        </tr>
        </table>
    </form>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            //在里面定义了cid，gid,sex分别是班级联动和单选框的默认值的设置
            persons:{cid:0,gid:0,sex:'男'},//数组统计传入控制器
            //picked:"男",//设置默认值为男
            hobbys:[],//给爱好设置一个空数组
            sheng:"",//获取省
            shi:"",//获取市
            grade:[],//给级部做一个空数组
            //gid:0,//级部id 用来做判断
            cla:[],//班级数组
            //cid:0,//班级id
        },
        mounted(){
            //先调用一下选择年级的代码 同样是链接数据库
            this.doCheckGrade();
           // this.doCheckCname();
        },
        methods:{
            doAdd:function () {
                vm.persons.address = vm.sheng+'-'+vm.shi;
                vm.persons.hobby = JSON.stringify(vm.hobbys);
                //alert(JSON.stringify(vm.persons));
                $.post("/person/save",{personData:JSON.stringify(vm.persons)},function (data) {
                    if (data.status == 1){
                        alert(data.success);
                        window.location.href="/person/demo4";
                    }
                });
            },//doAdd结束
            /**
             * 这部分是用来查询年级表的一个方法
             */
            doCheckGrade:function () {
                $.post("/person/findAllGrade",{},function (data) {
                    //alert(JSON.stringify(data));
                    var len = data.length;
                    for (var i=0;i<len;i++){
                        vm.grade.push(data[i]);
                    }
                });
            },//doCheckGrade结束
            /**
             * 查询完年级，关联班级表
             * 这个方法用来查询班级
             * */
            doCheckCname:function () {
                //alert(this.gid);
                vm.persons.cid=0;
                $.post("/person/doCheckCname",{gid:vm.persons.gid},function (data) {
                    //alert(JSON.stringify(data));
                    vm.cla=[];
                    var len = data.length;
                    for (var i=0;i<len;i++) {
                        vm.cla.push(data[i]);
                    }
                });
            },//doCheckCname结束
        },//methods结束
    });
</script>
</body>
</html>

控制器层

**PersonController.java **

package com.sdbairui.demo.Controller;

import com.sdbairui.demo.Entity.Cname;
import com.sdbairui.demo.Entity.Grade;
import com.sdbairui.demo.Service.CnameService;
import com.sdbairui.demo.Service.GradeService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.stereotype.Repository;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;

//控制器
@Controller    //解析为路径
@RequestMapping("/person")
public class PersonController {
    @Autowired(required = false) //自动注解功能      不写（required = false ）就会报错
            GradeService gradeService;
    @Autowired(required = false) //自动注解功能
            CnameService cnameService;

    @RequestMapping("/demo")                         
    public String demo(Model model) {               
        return "demo4";
    }

    /**
     * 查询年级的表
     * @return 年级表查询的结果集
     */
    @RequestMapping("/findAllGrade")
    @ResponseBody
    public Iterable<Grade> findAllGrade(){
        //返回年级表查询的结果集
        return gradeService.findAll();
    }

    /**
     * 查询班级表
     * @param request 获取gid用来做班级表的查询
     * @return 返回班级表查询的结果集
     */
    @RequestMapping("/doCheckCname")
    @ResponseBody
    public Iterable<Cname> doCheckCname(HttpServletRequest request){
        //获取gid用来做班级表的查询
        Integer gid = Integer.parseInt(request.getParameter("gid"));
        //返回班级表查询的结果集
        return cnameService.findByGid(gid);
    }

}

业务层

CnameService.java

package com.sdbairui.demo.Service;

import com.sdbairui.demo.Dao.CnameDao;
import com.sdbairui.demo.Entity.Cname;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;

@Service
public class CnameService {
    /**
     * 传入级部id按级部id来查数据
     * @param gid
     * @return	返回查询的结果集
     */
    @Resource
   private CnameDao cnameDao;
    public Iterable<Cname> findByGid(Integer gid){
        return cnameDao.findByGid(gid);
    }
}

GradeService.java

package com.sdbairui.demo.Service;

import com.sdbairui.demo.Dao.GradeDao;
import com.sdbairui.demo.Entity.Grade;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
@Service
public class GradeService {
    /**
     * 查询grade表的全部数据
     * @return 这个表的数据集合
     */
    @Resource
    private  GradeDao gradeDao;
    public Iterable<Grade> findAll(){
        return gradeDao.findAll();
    }
}

数据访问层

CnameDao.java

package com.sdbairui.demo.Dao;

import com.sdbairui.demo.Entity.Cname;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.PagingAndSortingRepository;


public interface CnameDao  extends PagingAndSortingRepository<Cname, Integer>, JpaSpecificationExecutor<Cname>{
    @Query("from cname")
    Iterable<Cname> findAll();
    @Query(value = "select * from cname where ccid=?1",nativeQuery=true)
    Cname findByCid(Integer ccid);

    Iterable<Cname> findByGid(Integer gid);
}

GradeDao.java

package com.sdbairui.demo.Dao;

import com.sdbairui.demo.Entity.Grade;
import com.sdbairui.demo.Entity.Student;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;

import java.util.List;

public interface GradeDao extends JpaRepository<Grade,Integer> {
}

(省略了实体类)

万幸得以相识_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS二级联动(级部)（班级）

Mysql数据库cname(班级表)grade（级部表）personvue页面<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://apps.bdimg.
复制链接

扫一扫

专栏目录