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("异常!");