netCore3.0+webapi到前端vue(前后分离)

Posted ouyangkai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了netCore3.0+webapi到前端vue(前后分离)相关的知识,希望对你有一定的参考价值。

 

第一步创建api项目

技术图片

 

 

创建完成启动F5!!

如图技术图片

 

数据库我用的是mysql 用ef操作数据 

开发环境:Win10 + VS2019
Mysql服务器版本:8.0.16

 

1.下载并安装插件(必备)

MySQL-Connector-net-6.9.12
MySQL for Visual Studio 2.0.5

用Nuget方式安装MySql.Data.Entity-6.9.12,MySql.Data-6.9.12    MySql.Data.EntityFrameworkCore
注意!!! 安装的2个dll版本号必须一致以及对应MySQL-Connector-net版本相同

技术图片

 

2.在项目根目录新建Models文件

创建实体类 gj

public class gj
    
        // <summary>
        /// 主键
        /// </summary>
        public int id  get; set; 

        /// <summary>
        /// 标题
        /// </summary>
        public string method  get; set; 
        /// <summary>
        /// 内容
        /// </summary>
        public string text  get; set; 
        /// <summary>
        /// 状态 1正常 0删除
        /// </summary>
        public string type  get; set; 
    
   public class DbModel:DbContext
    
         public DbSet<gj> gj  set; get; 

        //protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        //    => optionsBuilder.UseMySQL(@"Server=localhost;database=testapp;uid=root;pwd=woshishui");
        public DbModel(DbContextOptions<DbModel> options) : base(options)
        

        
    

 

appsettings.json 配置数据连接


  "ConnectionStrings": 
    "DefaultConnection": "Server=xxxx;database=testapp;uid=root;pwd=xxxx;"
  ,
  "Logging": 
    "LogLevel": 
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    
  ,
  "AllowedHosts": "*"

 

Startup.cs

 public void ConfigureServices(IServiceCollection services)
        
            //连接 mysql 数据库,添加数据库上下文
            services.AddDbContext<DbModel>(options =>
                options.UseMySQL(Configuration.GetConnectionString("DefaultConnection")));

            services.AddControllers();
          
        

 

Controllers 下的ValuesController.cs

修改代码如下

 private readonly DbModel _coreDbContext;

        public ValuesController(DbModel coreDbContext)
        
            _coreDbContext = coreDbContext;
        

        // GET api/values
        [HttpGet]   
        public List<gj> Get()
        
            return _coreDbContext.Set<gj>().ToList();
          
        

 

3.完成配置运行项目

测试如下

技术图片

 

至此就完成了后端api项目

 

以上是关于netCore3.0+webapi到前端vue(前后分离)的主要内容,如果未能解决你的问题,请参考以下文章

在 AZURE 或本地部署 .net core 3.0

.net core3.1 webapi + vue.js + axios实现跨域

Microsoft TeamFoundationServer ExtendedClient 与 Asp.Net Core 3 不兼容

如何将 .NET Core 2.2 Web API 迁移到 .NET Core 3.0?

vue+webAPI中json相互转换的点滴记录,用于实现按分值的调查问卷功能

vue+webAPI中json相互转换的点滴记录,用于实现按分值的调查问卷功能