c++服务器后端与前端进行交互

c++服务器后端与前端进行交互

2022年了,回头看看,曾经的梦想实现了嘛!

一直想把自己所做的深度学习做成一个小玩意,但奈何懒啊,终于的终于,动土了!先从小网页做起吧

首先感谢大学同班的几个web大神,在我实现这些你们认为很简单的东西里面帮了我不少忙,这些东西本可以都让他们来做的,但是工作之后你懂得,而且别人写的自己也不放心呐

接下来,进入重点


环境:

ubuntu(windows也可以不过需要你跟着步骤自己解决问题了)

c++ http库 Poco (找了好几天才找到的一个好用的,其他的库对于新手来说,太难受)

前端小页面ubuntu(windows也可以不过需要你跟着步骤自己解决问题了)

测试

先来个开胃小菜,可以 点击 测试一下,(假如出现不能访问的情况,可能就是服务器到期了)

全部代码

c++代码 (POCO库的编译不用我说了吧)

#include <Poco/Net/ServerSocket.h>
#include <Poco/Net/HTTPServer.h>
#include <Poco/Net/HTTPRequestHandler.h>
#include <Poco/Net/HTTPRequestHandlerFactory.h>
#include <Poco/Net/HTTPResponse.h>
#include <Poco/Net/HTTPServerRequest.h>
#include <Poco/Net/HTTPServerResponse.h>
#include <Poco/Util/ServerApplication.h>
#include <iostream>
#include <string>
#include <vector>
#include <Poco/JSON/Parser.h>
#include <Poco/StreamCopier.h>
#include <Poco/Util/ServerApplication.h>
#include <Poco/JSON/Parser.h>
#include <Poco/StreamCopier.h>
using namespace Poco::JSON;
using namespace std;
using namespace Poco::Net;
using namespace Poco::Util;
class MyRequestHandler : public HTTPRequestHandler
public:
	virtual void handleRequest(HTTPServerRequest &req, HTTPServerResponse &resp)
		Application& app = Application::instance();
		app.logger().information("Request from " + req.clientAddress().toString());
		std::string Json_str;
        	Poco::StreamCopier::copyToString(req.stream(), Json_str);
        	std::cout<<Json_str<<std::endl;
        	Poco::JSON::Parser parser;
        	Poco::Dynamic::Var json = parser.parse(Json_str);
        	Poco::JSON::Object::Ptr object_ptr = json.extract<Poco::JSON::Object::Ptr>();
        	int a = object_ptr->getValue<int>("a");
        	int b = object_ptr->getValue<int>("b");
		int d  = a*b;
		//解决跨域问题
		resp.add("Access-Control-Allow-Origin","*");
        	resp.add("Access-Control-Allow-Methods","POST,GET,OPTIONS,DELETE");
        	resp.add("Access-Control-Max-Age","3600");
        	resp.add("Access-Control-Allow-Headers","x-requested-with,content-type");
        	resp.add("Access-Control-Allow-Credentials","true");
		resp.setStatus(HTTPResponse::HTTP_OK);
		resp.setContentType("text/json");
		Poco::JSON::Object bodyObj;
        	bodyObj.set("d", d);
        	std::ostringstream ss;
        	bodyObj.stringify(ss);
        	std::string body;
        	body = ss.str();
        	resp.setStatus(HTTPResponse::HTTP_OK);
        	ostream &out = resp.send();
        	out << body;
		std::cout<<body<<std::endl;
class MyRequestHandlerFactory : public HTTPRequestHandlerFactory
public:
	virtual HTTPRequestHandler* createRequestHandler(const HTTPServerRequest &)
		return new MyRequestHandler;
class MyServerApp :public ServerApplication
protected:
	int main(const vector<string> &)
		HTTPServer s(new MyRequestHandlerFactory, ServerSocket(8080), new HTTPServerParams);
		s.start();
		cout << endl << "Server started" << endl;
		waitForTerminationRequest();  // wait for CTRL-C or kill
		cout << endl << "Shutting down..." << endl;
		s.stop();
		return Application::EXIT_OK;
int main(int argc, char **argv)
	MyServerApp app;
	return app.run(argc, argv);

编译c++代码脚本

 g++ ./main.cpp -o poco -I ../poco/Net/include  -I ../poco/Foundation/include -I ../poco/JSON/include -L ../poco/cmake-build/lib -lPocoNet -lPocoUtil -lPocoFoundation -lPocoJSON

假如上面的代码你编译出错了,那请你去学习一下g++编译选项都是什么意思,实在解决不了,别给我留言,这些小问题我不想看

前端代码

<html>
<meta charset="utf-8"> 
<title>multiply</title> 
</head>
<form id = "form1">
A: <input type="text" name="a" placeholder="数字A" id = "A"><br>
B: <input type="text" name="b" placeholder="数字B" id = "B"><br>
ans: <div type="text" name = "ans" id = "ans"></div><br>
<input type="submit" value="提交" id = "submit">
</form>
<p>点击"提交"按钮,表单数据将被发送到服务器上的“mul”程序上。</p>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <script type="text/javascript">
 $("#submit").on("click",function(){
	var a = $("#form1 input:eq(0)").val();
	var b = $("#form1 input:eq(1)").val();
	var params={};
	params.a = parseInt(a);
	params.b = parseInt(b);
	console.log(params);
	$.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url:"http://localhost:8080" ,//url
                data: JSON.stringify(params),
                success: function (result) {
			console.log(result);
			$("#ans").text(result.d);
                    	if (result.resultCode == 200) {
                        alert("SUCCESS");
                error : function(err) {
                    alert("异常!");