老山做网站的公司,网站建设制作软件叫啥,wordpress 维基主题,画册印刷Embedded-Project项目介绍 Server后端项目后端启动连接数据库启动时可能遇到的问题架构介绍 web前端项目前端启动启动时可能遇到的问题架构介绍 前后端分离开发流程 项目地址#xff1a;
https://github.com/Catxiaobai/Embedded-Project Server后端项目
系统后端项目#… Embedded-Project项目介绍 Server后端项目后端启动连接数据库启动时可能遇到的问题架构介绍 web前端项目前端启动启动时可能遇到的问题架构介绍 前后端分离开发流程 项目地址
https://github.com/Catxiaobai/Embedded-Project Server后端项目
系统后端项目基于django实现 后端环境python3、django、sqlite3
后端启动
直接采用命令行python manage.py runserver 或 pycharm配置启动Pycharm 配置运行 Django 项目
连接数据库
python manage.py makemigrations
python manage.py migrate启动时可能遇到的问题 No module named corsheaders 解决方法pip install django-cors-headers No module named numpy 解决方法pip install numpy No module named graphviz 解决方法pip install graphviz No module named untangle 解决方法pip install untangle
架构介绍
项目包含以下主要文件和文件夹
background(generation): 项目的主要工程代码 -models.py: 定义数据模型 -urls.py: 处理 URL 映射 -views.py: 执行业务逻辑server: 连接配置 -settings.py: Django 项目的主要设置文件其中包含了许多配置选项例如数据库设置、静态文件设置、中间件配置等。在这里你可以设置许多与服务器相关的选项。
出现Starting development server at http://localhost:xxxx/代表启动成功
web前端项目
系统前端项目基于vue实现 环境配置npm、node、vue-cli
前端启动
npm install 安装配置npm server 启动项目 启动时可能遇到的问题
node-sass已废弃 解决方法使用sass替代 sass: ^1.26.5eslint严格限制代码规范 解决方法移除 no-unused-vars: off
架构介绍
一个 Vue 项目通常包含以下主要文件和文件夹 src/: 包含项目的源代码。 assets/: 存放静态资源文件如图片、样式表等。 components/: 存放 Vue 组件。 -views/: 存放页面级别的组件。 -router/: 存放路由配置文件。 -store/: 存放 Vuex 状态管理相关文件。 与后端连接api设置 Api.vue下修改const Global_Api http://127.0.0.1:4096
出现app running at代表前端启动成功 App running at:- Local: http://localhost:xxxx/- Network: http:前后端分离开发流程
前后端可分别开发后端完成代码接口提供给前端调用即可
后端在 myapp/views.py 中编写一个简单的视图
from django.http import JsonResponsedef get_data(request):data {message: Hello from Django!}return JsonResponse(data)
后端urls.py 中配置该视图的 URL
from django.urls import path
from myapp.views import get_dataurlpatterns [path(api/get_data/, get_data, nameget_data),# 其他 URL 配置...
]
即可得到该功能接口http://localhost:xxxx/api/get_data/提供给前端使用
前端编写一个简单的组件hello.vue
templatediv idapph1{{ message }}/h1/div
/templatescript
export default {data() {return {message: Hello from Vue!,};},mounted() {// 使用后端接口this.$axios.get(http://127.0.0.1:xxxx/api/get_data/).then(response {this.message response.data.message;}).catch(error {console.error(Error fetching data:, error);});},
};
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}h1 {font-size: 2em;margin-bottom: 20px;
}
/style
