摘    要

数字化校园是我国政府近些年一直在大力推行的一项为了提高教学质量以及课堂效率的重要举措。而精品课程网站属于其重要的组成部分，是对优势课程资源的一个整合，对于提升高校的现代化教育水平有着不可忽视的作用。

该精品课程网站主要的功能菜单有教学资源，课程建设，实践教学，教学成果，教学团队。本文对开发精品课程网站所涉及的技术栈及其具体设计与实现做了较为详细的介绍分析，对于开发过程中遇到的问题提出了相应的解决方案。在最后的线上测试中，完成了精品课程网站的基本功能，具有一定的实用价值。

该网站采用时下流行的“前后端分离”模式开发，后端采用Spring Boot框架进行开发，Spring Boot框架可以快速的引入相关依赖，无需配置文件，减少工作量。Web应用的后端返回REST（Representational State Transfer）接口，供前端使用。前端采用Vue框架进行开发，组件库选用Element，与后端的通信采用的HTTP客户端为axios，通过Ajax请求拿到后端传回的JSON数据，渲染前端页面，做到数据与页面分离，将程序解耦。应用的线上部署也是采用“前后端分离”的方式，前端项目和后端项目运行在不同的端口。将Vue应用打包之后放到服务器上，并通过配置nginx反向代理，使其运行在80端口；同时将Spring Boot应用打包之后的jar包运行在8081端口，再次通过配置nginx来实现跨域访问后端接口。

关键词：课程网站；前后端分离；Java；Vue.js；MySQL

Design and implementation of artificial intelligence boutique course website

Abstract 

The digital campus is an important measure that the Chinese government has been vigorously promoting in recent years to improve the quality of teaching and classroom efficiency. The boutique course website is an important part of it, and it is an integration of the superior curriculum resources, which can not be ignored for improving the modern education level of colleges and universities.

The main function menu of the boutique course website has teaching resources, course construction, practical teaching, teaching achievements, and teaching team. This paper makes a detailed introduction and analysis of the technology stack involved in the development of the excellent course website and its specific design and implementation, and proposes corresponding solutions to the problems encountered in the development process. In the final online test, the basic functions of the boutique course website were completed, which has certain practical value.

The website is developed using the popular “separating front and back-end” mode, and the back-end is developed using the Spring Boot framework. The Spring Boot framework can quickly introduce related dependencies, eliminating the need for configuration files and reducing the workload. The back end of the web application returns a REST (Representational State Transfer) interface for use by the front end. The front end is developed by Vue framework, the component library selects Element, and the HTTP client used for communication with the back end is axios. The Ajax request gets the JSON data returned by the back end, renders the front page, and separates the data from the page. Decoupling. The online deployment of the application is also a “separating front and back-end” approach, with front-end projects and back-end projects running on different ports. After the Vue application is packaged, it is placed on the server and configured to run on port 80 by configuring the nginx reverse proxy. At the same time, the jar package after the Spring Boot application is packaged is run on port 8081, and the nginx is configured again to implement cross-domain access. End interface.

Key Words：Course Website; Separating Front and Back-end; Java; Vue.js; MySQL