みなさん、こんにちは。フェン兄弟です。フロントエンドとバックエンドが分離された優れた springboot+vue 学生コース選択管理システムを見つけました。共有させてください。

プロジェクト紹介

フロントエンドとバックエンドを分離して開発したプロジェクトで、フロントエンドはVue、バックエンドはSpringBoot + Mybatisで開発しています。

プロジェクトの展開

1.studentms.sqlをmysqlデータベースにインポートします

2. フロントエンド Web ストームを実行して Student_client をインポートし、実行します

3.バックエンドアイデアを実行してstudent_serverをインポートします。

プロジェクトの表示

1. ログインインターフェース

2. 管理メインインターフェイス

3. 動的検索ボックスとテーブル表示

4. 学生端末のホームページの表示

5. 教師の成績の検索と編集

フロントエンド

1. プロジェクトの運営

ES6/7 などの多数の新しい属性が関係するため、ノードにはバージョン 6.0 以降が必要です

2. 技術スタック

Vuex
ルーター
アクシオス
要素ui
セッションストレージ

3. プロジェクト紹介

Vue 2.0で開発されており、バックエンドが提供するデータインターフェースを呼び出すことでデータの動的なレンダリングを実現します。プロジェクトのデフォルトのポート番号 8080

Mybatisの強力な動的SQL機能を活用したモニターを利用して、高性能な動的検索機能を実現します。
ルーターを使用してルーティングを構成し、さまざまなユーザータイプに合わせてナビゲーションバーを動的にレンダリングする
axios を使用してバックエンドデータを非同期的にロードする
要素 ui を使用してフォームのフロントエンド検証機能を実現します
sessionStorage を使用してログインインターセプトを実装する
フロントエンドとバックエンドにそれぞれ基づいてデータページング機能を実装

4. システム機能

1、管理者

教師、生徒、コースの CRUD を実現する
教師ビジネスと生徒ビジネスの全方位コントロールを実現

2、先生

私が提供するコースに関する質問と、私のコースを選択する学生の情報を理解する
学生の成績にログインする

3、学生

コース選択・退会機能を実現
結果をクエリする機能を実現する

バックエンド部分

1. プロジェクトの運営

JDK バージョンは 1.8 以降が必要です

2. 技術スタック

スプリングブーツ2.6.3
私の靴
メイビン

3. プロジェクト紹介

Restful スタイルで開発されており、CrossOrigin を使用してクロスドメインの問題を解決します。アノテーションと XML ファイルを使用して SQL ステートメントを構成し、動的 SQL の機能を実現し、フロントエンドに完全なデータインターフェイスを提供します。

vue プロジェクトはデフォルトの Tomcat ポート 8080 を占有するため、指定されたプロジェクトはポート 10086 で開始され、YAML ファイルで構成して Maven プロジェクトにパッケージ化できます。

4. システム機能

フロントエンド Ajax リクエストのすべてのデータインターフェイスを実現し、Get リクエストは RESTful スタイルで開発されます。

データベース設計

コードの一部

@RestController
@CrossOrigin("*")
@RequestMapping("/student")
public class StudentController {
    @Autowired
    private StudentService studentService;

    @PostMapping("/addStudent")
    public boolean addStudent(@RequestBody Student student) {
        System.out.println("正在保存学生对象" + student);
        return studentService.save(student);
    }

    @PostMapping("/login")
    public boolean login(@RequestBody Student student) {
        System.out.println("正在验证学生登陆 " + student);
        Student s = studentService.findById(student.getSid());
        if (s == null || !s.getPassword().equals(student.getPassword())) {
            return false;
        }
        else {
            return true;
        }
    }

    @PostMapping("/findBySearch")
    public List<Student> findBySearch(@RequestBody Student student) {
        Integer fuzzy = (student.getPassword() == null) ? 0 : 1;
        return studentService.findBySearch(student.getSid(), student.getSname(), fuzzy);
    }

    @GetMapping("/findById/{sid}")
    public Student findById(@PathVariable("sid") Integer sid) {
        System.out.println("正在查询学生信息 By id " + sid);
        return studentService.findById(sid);
    }

    @GetMapping("/findByPage/{page}/{size}")
    public List<Student> findByPage(@PathVariable("page") int page, @PathVariable("size") int size) {
        System.out.println("查询学生列表分页 " + page + " " + size);
        return studentService.findByPage(page, size);
    }

    @GetMapping("/getLength")
    public Integer getLength() {
        return studentService.getLength();
    }

    @GetMapping("/deleteById/{sid}")
    public boolean deleteById(@PathVariable("sid") int sid) {
        System.out.println("正在删除学生 sid：" + sid);
        return studentService.deleteById(sid);
    }

    @PostMapping("/updateStudent")
    public boolean updateStudent(@RequestBody Student student) {
        System.out.println("更新 " + student);
        return studentService.updateById(student);
    }
}

<template>
  <div>
    <el-form style="width: 60%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="课程名" prop="cname">
        <el-input v-model="ruleForm.cname"></el-input>
      </el-form-item>
      <el-form-item label="学分" prop="ccredit">
        <el-input v-model.number="ruleForm.ccredit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="test">test</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        cname: null,
        ccredit: null
      },
      rules: {
        cname: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        ccredit: [
          { required: true, message: '请输入学分', trigger: 'change' },
          { type: 'number', message: '请输入数字', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 通过前端校验
          const that = this
          // console.log(this.ruleForm)

          axios.post("http://localhost:10086/course/save", this.ruleForm).then(function (resp) {
            console.log(resp)
            if (resp.data === true) {
              that.$message({
                showClose: true,
                message: '插入成功',
                type: 'success'
              });
            }
            else {
              that.$message.error('插入失败，请检查数据库t');
            }
            that.$router.push("/queryCourse")
          })
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    test() {
      console.log(this.ruleForm)
    }
  }
}
</script>

ソースコードのダウンロード

(CSDN 0 点ダウンロード): springboot+vue 学生コース選択管理システム - Java ドキュメントリソース - CSDN ダウンロード

または Jiafeng 兄弟 WX: java8822 (バックアップ: java9266) も受信可能

Springboot+vue の非常に美しい学生コース選択管理システムを無料で共有します

プロジェクト紹介

プロジェクトの展開

プロジェクトの表示

1. ログインインターフェース

2. 管理メインインターフェイス

3. 動的検索ボックスとテーブル表示

4. 学生端末のホームページの表示

5. 教師の成績の検索と編集

フロントエンド

1. プロジェクトの運営

2. 技術スタック

3. プロジェクト紹介

4. システム機能

バックエンド部分

1. プロジェクトの運営

2. 技術スタック

3. プロジェクト紹介

4. システム機能

データベース設計

コードの一部

ソースコードのダウンロード

人気のおすすめ

おすすめ