[52ABP系列] - 001、SPA免费项目模版搭建教程
2024-10-19 21:34:25
前言
这个项目是基于 ABP ASPNetCore 免费版,整合 NG-Alian 和 NG-Zorro 的项目,所以比较适合熟悉 ABP 和 Angular2+ 的开发人员,
如果你是新手,学习的话可以先了解以下资料
ABP资料:
Angular资料:
话不多说,教程开始
一、下载项目
- 到github clone项目 : 项目地址
- 项目下载完成,准备配置项目
clone根目录中的 src目录下 angular-zorro-free是前端angluar目录,aspnet-core是后台的目录)
二、后端解决方案初始化配置
- 还原nuget包
- 项目数据库连接字符串和跨域的基本配置
将数据库连接字符串修改为你的连接字符串 (注意:默认数据库为SQL Server
,最低要求2012
版本)
- 修改项目调试启动配置信息
三、后端解决方案初始化数据库
- 将 .Web.Host 设置为启动项目
- 打开程序包管理控制台,并设置默认项目为 .EntityFrameworkCore
- 输入命令,迁移数据库:
update-database
如果没有用过EFCore Code First做迁移,请先查阅资料 官方文档
到这里呢,后端解决方案就配置完成了,如果你的环境没有问题,这个时候只需要 Ctrl+F5 就能运行,运行成功后就能在浏览器看到如下界面了
四、前端项目初始化
后端项目配置完成之后,开始配置前端项目
- 打开前端项目 并 还原前端依赖库
(前端项目目录:angular-zorro-free)
(这里我使用的是vs code打开的项目)
(输入命令,还原依赖库,我在这里是用的npm (npm install ) (可以用npm/yarn等等,看个人喜好))
- 前端依赖还原完成,输入命令运行项目:
npm start
编译成功之后会自动打开浏览器,就能看到这个界面,默认账号: admin 密码: 123qwe
登陆之后的界面
至此,整个项目就成功运行起来
补充: 如果 后端 和 前端 的地址(IP、端口、域名)都修改了,需要重新修改后端和前端的配置
后端要修改的位置:
修改 appsettings.json 中 CorsOrigins 的配置,修改为你的前端的地址(如:前端项目地址为 http://localhost:666 ,就在这里修改或添加这个地址),以 英文逗号 分隔
前端要修改的位置:
找到 appconfig.json 配置文件,
- 将 remoteServiceBaseUrl 设置为后端的地址,如: http://localhost:10010
- 将 appBaseUrl 设置为前端地址,如: http://localhost:666
按照上面这样修改完成之后应该就没有问题了,只要你没有改错的话....
那么,这篇文章也就到此结束了,希望大家多多支持...
最新文章
- .Net中使用SendGrid Web Api发送邮件(附源码)
- C++学习笔记29:运行期型式信息2
- 使用本地服务器组来管理局域网或公网上的SQLSERVER
- 再说Play!framework http://hsfgo.iteye.com/blog/806974
- ACM题目————Aggressive cows
- Tomcat启动报错 Failed to start component [StandardServer[8005]]解决
- mysql 针对单张表的备份与还原
- sql 学习笔记 档
- ABP官方文档翻译 2.7 对象到对象的映射
- 文件I/O实践(2) --文件stat
- 使用guava过期map
- GP中Geoprocessor.Execute(string name, IVariantArray parameters, ITrackCancel trackCancel)
- centos6.8 固定IP
- SQUAD的rnet复现踩坑记
- CString数组和CStringArray
- ubuntu,day 2 ,退出当前用户,创建用户,查找,su,sudo,管道符,grep,alias,mount,tar解压
- vue-cli+webpack项目,修改项目名称
- 比特币全节点(bitcoind) eth 全节点
- 【转载】hadoop之failed task任务和killed task任务
- Flask With
热门文章
- Java HTTP 组件库选型看这篇就够了
- 04C#运算符
- 01CSS使用方法
- tensorflow 学习笔记-- tf.reduce_max、tf.sequence_mask
- python 列表生成式、lower()和upper()的使用
- “完美”解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来。
- HDU - 2102 A计划(双层BFS)
- idea搭建SSM的maven项目(tomcat容器)
- oracle亲手安装过程
- node assert.equal()