Vue+net Core Web Api项目开发的学习心得

本次开发项目使用Vue完成前端页面，.net Core Web Api三层架构完成后端接口

后端接口的编写

首先用到Visual Studio2022开发软件使用.net Code Web Api三层架构技术编写要用到接口

打开Visual Studio2022创建一个新的项目

输入.net core找到.net Core Api控制器

然后就可以开始创建你的后端API接口项目了

删除创建项目后自带的接口（用不上）

一、配置后三层架构要用到的文件夹（Model 实体层， Seiver数据层，Imp逻辑层，这里个人习惯把Imp写在Seiver里）和Config

然后去下载NuGet 包下载三个包 Microsoft.EntityFrameworkCore.SqlSer ，Microsoft.EntityFrameworkCore和SqlSugar包

二、三层架构的编写

1.Model 实体层里面主要存放数据库表，一个类就相当于一张表，类里面属性就是表字段，得和数据库保持一致。

这里创建一个用户表

然后编写用户表需要的字段

2、Seiver数据层里面主要是对数据库数据的操作。添加Model层引用。

依赖注入的构造方法注入，要访问数据库中的表。

3、创建Imp逻辑层里面主要是对代码逻辑的操作。

然后在Config创建WebApiContext

编写以下代码

public WebApiContext(DbContextOptions<WebApiContext> dbContext) : base(dbContext)
{
}

//User的上下文
public DbSet<User> user { get; set; }

然后返回添加Seiver层引用，依赖注入的构造方法注入，要访问Seiver的方法。

private readonly WebApiContext _webApiContext;

public UserServiceImp(WebApiContext webapiContext)
{
_webApiContext = webapiContext;
}

然后编写用户管理需要是接口逻辑

具体代码如下

//删除用户
public string DeleteUser(int id)
{
User user = _webApiContext.user.AsQueryable().Where(p => p.Id == id).First();
if (user == null)
{
return "找不到该用户！";
}
_webApiContext.user.Remove(user);
_webApiContext.SaveChangesAsync();
return "删除成功！";
}
//获取全部User表的全部数据
public List<User> GetUserALL()
{
return _webApiContext.user.AsQueryable().ToList();

    }
     //根据Id查询
     public User GetUserById(int id)
     {

        var sequence = _webApiContext.user.AsQueryable().Where(p => p.Id == id); // 假设这是你查询出来的序列

        // 解决方法：使用FirstOrDefault()
         var firstElement = sequence.FirstOrDefault();
         if (firstElement != default) // 检查是否获取到了有效元素
         {
             // 使用firstElement
             User user = _webApiContext.user.AsQueryable().Where(p => p.Id == id).First();
             return user;
         }
         return null;

    }
     //更新用户(修改用户)
     public User UpdateUser(User user)
     {
         //首先查询要修改数据
         User user1 = _webApiContext.user.AsQueryable().Where(p => p.Id == user.Id).First();
         //把查询出来的数据修改
         user1.Name = user.Name;
         user1.Email = user.Email;
         user1.Password = user.Password;
         user1.Picture = user.Picture;
         //保存到数据库表
         _webApiContext.SaveChangesAsync();
         return user1;
     }

4、在视图层里面主要是视图显示，

所以在Controllers文件夹添加控制器

添加Imp层引用，依赖注入的构造方法注入，要访问BLL的方法。

[ApiController]
public class UserController : ControllerBase
{
private readonly ISqlSugarClient _db;
private readonly WebApiContext _apiContext;
private readonly IUserServices _userServices;

 public UserController(ISqlSugarClient db, WebApiContext apiContext, IUserServices userServices)//9.11
  {
      _db = db;
      _apiContext = apiContext;
      _userServices = userServices;//9.11
  }

}

然后就是用户管理的接口编写

具体代码如下

///

/// 代码先行，生成数据库
///

/// <returns></returns>
[HttpGet]
public string CodeFisrt()
{
try
{
//1.生成数据库
_db.DbMaintenance.CreateDatabase();
//(1)查询数据库表是否存在，如果存在则删除
var tlist = _db.DbMaintenance.GetTableInfoList();
if (tlist != null && tlist.Count > 0)
{
tlist.ForEach(t =>
{
//删除表
_db.DbMaintenance.DropTable(t.Name);
});
}
//2.通过实体反射生成表
string nspace = "WebApplication1.Model";
//定义一个数组，获取程序集里特定命名空间下的所以类
Type[] ass = Assembly.LoadFrom(AppContext.BaseDirectory + "WebApplication1.dll")
.GetTypes().Where(p => p.Namespace == nspace).ToArray();
//获取数据库实例 _db
//使用CodeFirst反射表，字符串默认长度200
_db.CodeFirst.SetStringDefaultLength(200).InitTables(ass);

     User user = new User()
     {
         Name = "admin",
         Email = "xgg2002小白编写.com",
         Password = "123456",

     };
     //把数据插入数据库
     _db.Insertable(user).ExecuteCommand();

     return "数据库初始化成功！（各变为一条初始数据）";
 }
 catch (Exception ex)
 {
     return ex.Message;
 }

}

//写Get请求，返回ok
[HttpGet]
public string GetOk()
{
return "OK!返回结果成功";
}

//查询全部数据
[HttpGet]
//[Authorize(Roles = "admin")]//9.19
//[Authorize]//设置权限-9.11
public List<User> GetUserAll()
{
return _apiContext.user.AsQueryable().ToList();

}
//根据ID查询
[HttpPost]
public int AddUser([FromBody] User user)//如果这个形参是实体类，需要配合使用[FromBody]，这样才能接收到值
{
return _userServices.AddUser(user);
}
[HttpPost]
public User UpdateUser([FromBody] User user)//更新
{
return _userServices.UpdateUser(user);
}
[HttpPost]
public string DeleteUser(int id)//根据ID删除
{
return _userServices.DeleteUser(id);
}

5、连接数据库

代码如下：

"ConnectionStrings": {
//"连接数据库的方法名称"："配置文件"
"gameDB": "Data Source=.;Initial Catalog=gameDB;Persist Security Info=True;User ID=sa;Password=123456;Encrypt=True;TrustServerCertificate=True;"
},
"JWTTokenoptions": {
"Audience": "http://Localhost:5175",
"Issuer": "http://localhost:5175",
"SecurityKey": "8f7c09b7-03a5-4d36-843c-eD82f13e56365",
"ValidityInMinutes": 10
}

6.编写主函数Program

在 Program主函数里面添加 .UseServiceProviderFactory(new AutofacServiceProviderFactory())//改用Autofac来实现依赖注入在Startup 类里面添加 ConfigureContainer方法

代码如下：
//把上下文注入服务器
builder.Services.AddDbContext<WebApiContext>(opt =>
opt.UseSqlServer(builder.Configuration.GetConnectionString("gameDB")));

//builder.Services是ASP.NET Core内置的依赖注入服务器
builder.Services.AddTransient<ISqlSugarClient>(p =>
{
//创建一个ISqlSugarClient实例
SqlSugarClient db = new SqlSugarClient(new ConnectionConfig()
{
//选择数据库类型
DbType = DbType.SqlServer,
//配置连接数据库字符串
ConnectionString = builder.Configuration.GetConnectionString("gameDB"),
//设置数据库是否自动关闭连接
IsAutoCloseConnection = true
});
return db;
});

//把服务层注入容器-9.11-xgg2002
builder.Services.AddScoped<IUserServices, UserServiceImp>();

7.测试接口

这样用户管理的后端接口就编写的差不多了，

然后就可以启动项目去尝试测试接口

然后去数据库查看是否真的成功实现我们想要的结果

当然光一个用户管理肯定是不够的，

我们可以根据以上程序步骤，我们就可以创建我们项目所需要的接口

这样我负责项目的后端API接口就差不多完成了

前端页面的编写

前端将会使用VS code的Vue来编写页面

一、创建Vue项目

首先我们先创建一个Vue3的项目

确保你已经安装了Vue CLI。如果没有安装，可以通过以下命令安装：

npm install -g @vue/cli# 或者yarn global add @vue/cli

在命令行窗口输入命令

vue create [web名称]

后，点击回车(Enter)键。进入如下界面

可以使用方向键上/下进行选项选择，本文只是是基于 vue3 的项目创建，故此处直接点击 **

回车(Enter)键

**，此时将进行项目创建。

然后使用VS code对项目进行编写，因为每个人的风格和想法不同，就不细讲页面制作了

二、调用API接口

这边就细讲一下如何使用Vue调用Api接口获取数据库的数据

进入Vue.config.js的Api接口好地址

创建用户管理页面，编写调用API接口的方法

定义一个user数组变量来接收后端接口的数据

调用这个方法，我这边使用一个按钮调用，并且把数据渲染到table表中

然后我们就可以在终端输入npm run serve让项目跑起来查看

点击后按钮后成功获取数据并且渲染到table里了

这样就说明我们完成了前后端的连接

剩下就是对Vue页面的编写和完善了就不细讲了

（ps：新人小白分享心得，如有问题，还请指出）

标签：数据库 visualstudio sql

本文转载自: https://blog.csdn.net/xgg2002/article/details/142996338
版权归原作者 xgg2002 所有，如有侵权，请联系我们删除。

Vue+net Core Web Api项目开发的学习心得

后端接口的编写

一、配置后三层架构要用到的文件夹（Model 实体层， Seiver数据层，Imp逻辑层，这里个人习惯把Imp写在Seiver里）和Config

二、三层架构的编写

1.Model 实体层里面主要存放数据库表，一个类就相当于一张表，类里面属性就是表字段，得和数据库保持一致。

4、在视图层里面主要是视图显示，

5、连接数据库

6.编写主函数Program

7.测试接口

前端页面的编写

一、创建Vue项目

二、调用API接口

发表评论

“Vue+net Core Web Api项目开发的学习心得”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航