zoukankan      html  css  js  c++  java
  • [52ABP系列]

    前言

    这个项目是基于 ABP ASPNetCore 免费版,整合 NG-AlianNG-Zorro 的项目,所以比较适合熟悉 ABPAngular2+ 的开发人员,

    如果你是新手,学习的话可以先了解以下资料

    ABP资料:  

    ABP官方文档-英文

    ABP ASP.NET版 中文文档

    Angular资料:

    Angular官方中文文档

    大漠穷秋 Angular2 基础视频教程

    Antd-NG-Zorro 官方文档

    NG-Alain 官网

    话不多说,教程开始

    一、下载项目

    1. 到github clone项目 : 项目地址

    1. 项目下载完成,准备配置项目
      clone根目录中的 src目录下 angular-zorro-free是前端angluar目录,aspnet-core是后台的目录)

    二、后端解决方案初始化配置

    1. 还原nuget包

    1. 项目数据库连接字符串和跨域的基本配置
      将数据库连接字符串修改为你的连接字符串 (注意:默认数据库为 SQL Server ,最低要求 2012 版本)

    1. 修改项目调试启动配置信息

    三、后端解决方案初始化数据库

    1. .Web.Host 设置为启动项目
    2. 打开程序包管理控制台,并设置默认项目为 .EntityFrameworkCore

    1. 输入命令,迁移数据库: update-database
      如果没有用过EFCore Code First做迁移,请先查阅资料 官方文档

    到这里呢,后端解决方案就配置完成了,如果你的环境没有问题,这个时候只需要 Ctrl+F5 就能运行,运行成功后就能在浏览器看到如下界面了

    四、前端项目初始化

    后端项目配置完成之后,开始配置前端项目

    1. 打开前端项目 并 还原前端依赖库
      (前端项目目录:angular-zorro-free)
      (这里我使用的是vs code打开的项目) (输入命令,还原依赖库,我在这里是用的npm (npm install ) (可以用npm/yarn等等,看个人喜好))

    1. 前端依赖还原完成,输入命令运行项目: npm start

    编译成功之后会自动打开浏览器,就能看到这个界面,默认账号: admin 密码: 123qwe

    登陆之后的界面

    至此,整个项目就成功运行起来

    补充: 如果 后端 和 前端 的地址(IP、端口、域名)都修改了,需要重新修改后端和前端的配置

    后端要修改的位置:

    修改 appsettings.jsonCorsOrigins 的配置,修改为你的前端的地址(如:前端项目地址为 http://localhost:666 ,就在这里修改或添加这个地址),以 英文逗号 分隔

    前端要修改的位置:

    找到 appconfig.json 配置文件,

    1. remoteServiceBaseUrl 设置为后端的地址,如: http://localhost:10010
    2. appBaseUrl 设置为前端地址,如: http://localhost:666

    按照上面这样修改完成之后应该就没有问题了,只要你没有改错的话....
    那么,这篇文章也就到此结束了,希望大家多多支持...

  • 相关阅读:
    腾讯微博
    城市左右选择添加按钮案例
    jQuery元素操作1
    动态创建表格
    五角星评论案例
    点击图片箭头回到顶部案例
    HDU1506: Largest Rectangle in a Histogram(最大子矩阵,好题动态优化左右边界)
    HDU1165: Eddy's research II(递推)
    HDU1158:Employment Planning(线性dp)
    HDU1081:To The Max(最大子矩阵,线性DP)
  • 原文地址:https://www.cnblogs.com/staneee/p/9377442.html
Copyright © 2011-2022 走看看