上次我们已经写过了一个简单的asp.net.mvc接口，这次我们通过前后端分离来实现一个前端表格后端接口传值对对数据库实现增删改查

后端我们建立四个控制器，分别放四个接口

同样使用数据库连接池链接数据库

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;

namespace mmApi    //这个每次都要改成你当前项目的命名空间名字   namespace ok
{
    public class SqlHelper
    {
        //<add key="SqlContext" value="Server=101.33.248.192;Database=MEKDW;Uid=test;Pwd=test01!;"/>这段复制到app.config中，将数据库改为自己的数据库
      //  string connectionString = ConfigurationManager.OpenExeConfiguration(ConfigurationUserLevel.None).AppSettings.Settings["SqlContext"].Value;
        public string connectionString = "Server=101.33.248.192;Database=test;Uid=test;Pwd=test01!;";
        public SqlConnection Connection
        {
            get;
            set;
        }
        

        public SqlHelper()
        {
            var ConnectionStr = connectionString;
            Connection = new SqlConnection(connectionString);
        }

        public object ExecuteScalar(string cmdString)
        {
            try
            {
                Connection.Open();
                SqlCommand cmd = new SqlCommand(cmdString, Connection);
                return cmd.ExecuteScalar();
            }
            catch (Exception e)
            {
                throw e;
            }
            finally
            {
                if (Connection.State != System.Data.ConnectionState.Closed)
                    Connection.Close();
            }
        }

        public int ExecuteNonQuery(string cmdString)
        {
            try
            {
                //var list = cmdString.Split(',').ToList();
                //for (int i = 0; i < list.Count; i++)
                //{
                //    bool isString = false;
                //    if (list[i].StartsWith("'") && list[i].EndsWith("'"))
                //    {
                //        isString = true;
                //        list[i] = list[i].Substring(1, list[i].Length - 2);
                //    }

                //    if (list[i].Contains("'"))
                //        list[i] = list[i].Replace("'", "''");

                //    if (isString)
                //        list[i] = "'" + list[i] + "'";
                //}

                //StringBuilder sb = new StringBuilder();
                //foreach (var s in list)
                //    sb.Append(s + ",");

                Connection.Open();
                var cmd = new SqlCommand(cmdString, Connection);

                return cmd.ExecuteNonQuery();
            }
            catch (Exception e)
            {
                throw e;
            }
            finally
            {
                if (Connection.State != System.Data.ConnectionState.Closed)
                    Connection.Close();
            }
        }

        public DataTable GetData(string cmdString)
        {
            try
            {
                SqlDataAdapter da = new SqlDataAdapter(cmdString, Connection);
                DataSet ds = new DataSet();
                da.Fill(ds);
                if (ds.Tables.Count > 0)
                    return ds.Tables[0];
                else
                    throw new Exception("没有找到表");
            }
            catch (Exception e)
            {
                throw e;
            }
            finally
            {
                if (Connection.State != ConnectionState.Closed)
                    Connection.Close();
            }
        }

        public bool ConnectTest()
        {
            try
            {
                var o = ExecuteScalar("select GetDate()");
                return true;
            }
            catch
            {
                return false;
            }
        }
    }
}

 然后建立我们的vue2项目，把后端的五个接口拿过来

 这里我们表格采用element-uli的表格样式

然后我们把前后端同时运行起来。跑起来看效果