C# 基础之前后端分离【01】

.netCore、vue（调用天气预报API）在搞好 vue 的基础上进行，参考： Vue-cli 安装如果最后运行前端无法获取到后端传的数据，看看是不是API程序没有启动VSCoder 中打开 vue 文件夹，在 components 文件下新建 Demo_y01.vueDemo_y01.vue内容：<template><!-- 至于为什么写在 template 里面不是很清楚

小印丶

4786人浏览 · 2020-09-27 16:40:51

小印丶 · 2020-09-27 16:40:51 发布

本文代码仓库地址： gitee码云CSDN笔记仓库地址

ASP.net Core Web、vue

在搞好 vue 的基础上进行，参考： Vue-cli 安装
如果最后运行前端无法获取到后端传的数据，看看是不是API程序没有启动

VSCoder 中打开 vue 文件夹，在 components 文件下新建 Demo_y01.vue

Demo_y01.vue内容：

<template>
<!-- 至于为什么写在 template 里面不是很清楚，参照HelloWorld.vue 文件里面的来的 -->
    <div>
        Hello 小印丶
        <div class="class01">
            <input type="text" id="id01">
            <button id="id02">搜索</button>
        </div>
        <hr id="id03">
        <div id="id04">
            <ul>
                <li>
                    <img src="/static/demo_image/k30至尊.jpg" alt="Redmi K30 至尊纪念版">
                    <p class="class02">&yen;1999</p>
                    <p>Redmi K30 至尊纪念版</p>
                </li>
                <li>
                    <img src="/static/demo_image/k30至尊.jpg" alt="Redmi K30 至尊纪念版">
                    <p class="class02">&yen;1999</p>
                    <p>Redmi K30 至尊纪念版</p>
                </li>
                <li>
                    <img src="/static/demo_image/k30至尊.jpg" alt="Redmi K30 至尊纪念版">
                    <p class="class02">&yen;1999</p>
                    <p>Redmi K30 至尊纪念版</p>
                </li>
                <li>
                    <img src="/static/demo_image/k30至尊.jpg" alt="Redmi K30 至尊纪念版">
                    <p class="class02">&yen;1999</p>
                    <p>Redmi K30 至尊纪念版</p>
                </li>
                <li>
                    <img src="/static/demo_image/k30至尊.jpg" alt="Redmi K30 至尊纪念版">
                    <p class="class02">&yen;1999</p>
                    <p>Redmi K30 至尊纪念版</p>
                </li>

                <li>
                    <img src="/static/demo_image/k30至尊.jpg" alt="Redmi K30 至尊纪念版">
                    <p class="class02">&yen;1999</p>
                    <p>Redmi K30 至尊纪念版</p>
                </li>
                <li>
                    <img src="/static/demo_image/k30至尊.jpg" alt="Redmi K30 至尊纪念版">
                    <p class="class02">&yen;1999</p>
                    <p>Redmi K30 至尊纪念版</p>
                </li>
                <li>
                    <img src="/static/demo_image/k30至尊.jpg" alt="Redmi K30 至尊纪念版">
                    <p class="class02">&yen;1999</p>
                    <p>Redmi K30 至尊纪念版</p>
                </li>
                <li>
                    <img src="/static/demo_image/k30至尊.jpg" alt="Redmi K30 至尊纪念版">
                    <p class="class02">&yen;1999</p>
                    <p>Redmi K30 至尊纪念版</p>
                </li>
                <li>
                    <img src="/static/demo_image/k30至尊.jpg" alt="Redmi K30 至尊纪念版">
                    <p class="class02">&yen;1999</p>
                    <p>Redmi K30 至尊纪念版</p>
                </li>
            </ul>
        </div>
        <hr>
        <div>
            <ul>
                <!-- 循环显示后端返回的值 cityForecast-->
                <li v-for="forecast in cityForecast" :key="forecast.id">
                    <p>
                        城市：{{forecast.scity}}，
                        天气情况：{{forecast.sinfo}}，
                        温度：{{forecast.stemperature}}，
                        湿度：{{forecast.shumidity}}，
                        风向：{{forecast.sdirect}}，
                        风力：{{forecast.spower}}，
                        空气质量指数：{{forecast.saqi}}；
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
// export default 向外导出，就是把里面的内容公开出来，让其他的地方可以引用它
export default {
    data() {
        return {
            // 存放数据
            cityForecast: String,
        }
    },

    // 在这个里面写我们的 js 代码
    mounted() {
        // 页面加载完成之后加载里面的内容，一般来说逻辑代码不在这个里面写
        // alert();
        this.getForecastList();
    },

    methods: {
        // 一般方法什么的在这个里面写
        // 可以简写为：getForecastList（）{}
        getForecastList: function(){
            // 下面匿名函数中的 this 表示的是匿名函数中的内容,不是表示这个 vue,这里就需要用 thisVue 这个第三方
            var thisVue = this;
            this.$http.get('https://localhost:44361/api/StudyCore/GetTest01').then(function(res){
                // res 后端传过来的返回值
                thisVue.cityForecast = res.data;
            })
        }
    },
}
</script>

<style scoped>
/* scoped：防止样式污染，这个里面的内容支只队本页面的样式有效【一定要加哦！！！】 */
    *{
        padding: 0;
        margin: 0;
    }
    #id01{
        width: 600px;
        height: 36px;
        border: red solid 3px;
        float: left;
        padding: 0 10px;
        /* 设置 轮廓色 */
        outline-color: red;
        /* 设置 轮廓样式 */
        /* outline: none; */
    }
    #id02{
        width: 80px;
        height: 42px;
        background-color: red;
        color: white;
        /* 去掉边框 */
        border: 0 none;
        float: left;
        /* 设置 轮廓色 */
        /* outline-color: red; */
        /* 设置 轮廓样式 */
        outline: none;
    }
    .class01{
        width: 706px;
        height: 42px;
        /* 外边距自动，为了自动调整居中，前面已经有设置居中了，这里是因为前面有浮动，所以需要来改变 */
        margin: auto;

    }
    #id03{
        margin-top: 50px;
        border: red 1px solid;
    }
    #id04{
        width: 1595px;
        height: 750px;
    }
    #id04 p{
        text-align: left;
    }
    #id04 li img{
        width: 260px;
    }
    #id04 li{
        border: solid  rgba(238, 238, 238, 0.397) 1px;
        width: 260px;
        margin: 40px 0 0 45px;
        /* 去除前面的小点点 */
        list-style: none;
        float: left;
        padding: 6px;
    }
    #id04 li:hover{
        border: #eee solid 1px;
        /* 两个0分别是：X轴阴影偏移量 Y轴偏移量 */
        box-shadow: 0 0 6px #ccc;
    }
    .class02{
        font-size: 18px;
        font-weight: bold;
        color: red;
        margin-bottom: 5px;
    }
</style>

router 下的index.js 文件：

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// 这是参照上面一行
import Demo_y01 from '@/components/Demo_y01'

Vue.use(Router)

// export default new Router({
//     // 路由
//     routes: [{
//         // 默认地址根目录
//         path: '/',
//         name: 'HelloWorld',
//         component: HelloWorld
//     }]
// })

// 参照上面的修改文件名
export default new Router({
    // 路由
    routes: [{
        // 默认地址根目录
        path: '/',
        name: 'Demo_y01',
        component: Demo_y01
    }]
})

App.vue文件是给 index.html 中添加内容，让页面中有东西存在

App.vue文件：

<template>
  <div id="app">
    <!-- 默认页面的图片 -->
    <img src="./assets/logo.png" />
    <!-- 默认页面的文本 -->
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在前后端交互的时候用的是 axios 这里需要先安装这个包，下面的main.js文件中有安装方法

main.js文件：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 先 需要在终端先安装包 cnpm install axios
// 再 引入包
import axios from 'axios'

Vue.config.productionTip = false
    // 然后 设定全局，在其他地方使用 this.$http 去使用 axios 插件，进行前后端的交互
Vue.prototype.$http = axios;

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

目前这样前端已经完成了。

打开 VS，新建项目
在这里插入图片描述

下面是项目的文件，圈起来的是我自己新建的3个文件和2个文件夹

Controllers 下的 StudyCoreController.cs文件：

StudyCoreController.cs文件是添加的API控制器，其他两个文件都是添加的类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using WebAppStudyCore01.Models;

namespace WebAppStudyCore01.Controllers {
  [EnableCors("any")]// 添加 跨域名【在同一台电脑上面端口不一样也属于跨域】
  [Route("api/[controller]/[action]")]// 后面添加 /[action] 下面是具体写到方法名
  [ApiController]
  public class StudyCoreController : ControllerBase {// 下面API地址只选取 StudyCoreController类 的前面部分 StudyCore
    /* API地址：https://localhost:44361/api/StudyCore/GetTest01 */
    public List<StudyCoreClass01> GetTest01()
    {
      List<StudyCoreClass01> scc01 = StudyCoreClass01.GetTextList();
      // 前端调用接口给前端返回的数据 scc01
      return scc01;
      // return "text小印丶";//可以先写上这句，看看接口有没有返回数据
    }
  }
}

Common 下的 SqlHelp.cs文件：

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Threading.Tasks;

namespace WebAppStudyCore01.Common {
  public class SqlHelp {
    public static string ConStr { get; set; }
    public static DataTable ExecuteTable(string cmdText)
    {
      using (SqlConnection con = new SqlConnection(ConStr))
      {
        con.Open();
        SqlCommand cmd = new SqlCommand(cmdText, con);
        SqlDataAdapter sda = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        sda.Fill(ds);
        return ds.Tables[0];
        // 取数据
      } 
    }
  }
}

Startup.cs文件：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using WebAppStudyCore01.Common;

namespace WebAppStudyCore01 {
  public class Startup {
    public Startup(IConfiguration configuration)
    {
      Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
      // ConStr 参数在是 appsettings.json 文件中
      var Constr = Configuration.GetSection("ConStr");
      SqlHelp.ConStr = Constr.Value;
      // 注册跨域的服务：“any”是给跨域起的名字，p里面是允许哪儿些内容
      services.AddCors(o => o.AddPolicy("any", p => p.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod()));
      services.AddControllers();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      if (env.IsDevelopment())
      {
        app.UseDeveloperExceptionPage();
      }

      app.UseHttpsRedirection();

      app.UseRouting();

      app.UseAuthorization();

      app.UseCors();// 添加跨域配置

      app.UseEndpoints(endpoints =>
      {
        endpoints.MapControllers();
      });
    }
  }
}

appsettings.json 文件：

{
  "ConStr": "Data Source=127.0.0.1; Database=yin; Uid=sa; Pwd=YINhui1998",// 这句也可以放在后面。【数据库地址、数据库名、账号、密码】
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Models 下的 StudyCoreClass01.cs文件：

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using WebAppStudyCore01.Common;

namespace WebAppStudyCore01.Models {
  public class StudyCoreClass01 {
    public String Scity { get; set; }// 城市名
    public String Sinfo { get; set; }// 天气情况
    public String Stemperature { get; set; }// 温度，可能为空
    public String Shumidity { get; set; }// 湿度，可能为空
    public String Sdirect { get; set; }// 风向，可能为空
    public String Spower { get; set; }// 风力，可能为空
    public String Saqi { get; set; }// 空气质量指数，可能为空

    public static List<StudyCoreClass01> GetTextList()
    {
      // 【这里不要用*，查询那些字段就把字段都写在上面的，就算是全部字段也自己写，不用*代替】
      DataTable dt = SqlHelp.ExecuteTable("select * from Study01");
      List<StudyCoreClass01> scc1 = new List<StudyCoreClass01>();
      for (int i = 0; i < dt.Rows.Count; i++)
      {
        scc1.Add(ToModel(dt.Rows[i]));
      }
      return scc1;
    }

    private static StudyCoreClass01 ToModel(DataRow dr)
    {
      // 下面后面的数据都是取自数据库
      StudyCoreClass01 scc = new StudyCoreClass01();
      scc.Scity = dr["cityName"].ToString();// 城市名
      scc.Sinfo = dr["info"].ToString();// 天气情况
      scc.Stemperature = dr["temperature"].ToString();// 温度，可能为空
      scc.Shumidity = dr["humidity"].ToString();// 湿度，可能为空
      scc.Sdirect = dr["direct"].ToString();// 风向，可能为空
      scc.Spower = dr["power"].ToString();// 风力，可能为空
      scc.Saqi = dr["aqi"].ToString();// 空气质量指数，可能为空
      return scc;
    }
  }
}

我的数据库：
在这里插入图片描述

笔记源码

一点点笔记，以便以后翻阅。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^